Невозможно открыть всплывающий div на щелчке кнопки, который находится в стороне от GridView

У меня есть сетка и кнопка внутри. Я хочу сделать ссылку на простой всплывающий div из этой ссылки , Я хочу открыть его при нажатии кнопки.

Вот мой код HTML:


                        
                            
                                
                                    
                                    <div>
                                        <div id="overlay" class="web_dialog_overlay">
                                        </div>
                                        <div id="dialog" class="web_dialog">
                                            <table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
                                                <tr>
                                                    <td class="web_dialog_title">
                                                        Message
                                                    </td>
                                                    <td class="web_dialog_title align_right">
                                                        Close
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                         
                                                    </td>
                                                    <td>
                                                         
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2" style="padding-left: 15px;">
                                                        <div id="brands">
                                                            <%#Eval("Message")%>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                         
                                                    </td>
                                                    <td>
                                                         
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2" style="text-align: center;">
                                                        <input id="btnSubmit" type="button" value="Submit" />
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                
                                
                                
                            
                            
                                
                                    <%#Eval("Name")%>
                                
                                
                                
                            
                            
                                
                                    " class="EmailLink">
                                        <%#Eval("Email")%>
                                
                                
                                
                            
                            
                                
                                
                                
                                    <%#Eval("Phone")%>
                                
                                
                            
                            
                                
                                
                                
                                    <%#Eval("Subject")%>
                                
                                
                            
                            
                                
                                    Click to Delete this Entry
                                    
                                
                                
                                
                            
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                    

Here is the CSS used for Pop Up

.web_dialog_overlay
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #000000;
    opacity: .15;
    filter: alpha(opacity=15);
    -moz-opacity: .15;
    z-index: 101;
    display: none;
}
.web_dialog
{
    display: none;
    position: fixed;
    width: 380px;
    height: 200px;
    top: 50%;
    left: 50%;
    margin-left: -190px;
    margin-top: -100px;
    background-color: #ffffff;
    border: 2px solid #336699;
    padding: 0px;
    z-index: 102;
    font-family: Verdana;
    font-size: 10pt;
}
.web_dialog_title
{
    border-bottom: solid 2px #336699;
    background-color: #336699;
    padding: 4px;
    color: White;
    font-weight: bold;
}
.web_dialog_title a
{
    color: White;
    text-decoration: none;
}
.align_right
{
    text-align: right;
}

And here is the jQuery code for pop up:

$(document).ready(function() {

$(function() {
    $('input[id*=hello]').click(function() {
        ShowDialog(true);
        e.preventDefault();
        return false;
    });
});


$('[id$=btnShowModal]').live('click', function (e) {
    ShowDialog(true);
    e.preventDefault();

});

$("#btnClose").click(function (e) {
    HideDialog();
    e.preventDefault();
});

$("#btnSubmit").click(function (e) {
    var brand = $("#brands input:radio:checked").val();
    $("#output").html("Your favorite mobile brand: " + brand);
    HideDialog();
    e.preventDefault();
});
});
function ShowDialog(modal) {
    $("#overlay").show();
    $("#dialog").fadeIn(300);
    if (modal) {
        $("#overlay").unbind("click");
    } else {
        $("#overlay").click(function (e) {
            HideDialog();
        });
    }
}

function HideDialog() {
    $("#overlay").hide();
    $("#dialog").fadeOut(300);
} 
2
nl ja de
почему пустые голоса ?????? я спросил что-то не так
добавлено автор Ram, источник

1 ответы

Сделал глупую ошибку:

                        
                        
                            
                                
                                    
                                    <div>
                                        <div id="overlay" class="web_dialog_overlay">
                                        </div>
                                        <div id="dialog" class="web_dialog">
                                            <table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
                                                <tr>
                                                    <td class="web_dialog_title">
                                                        Message
                                                    </td>
                                                    <td class="web_dialog_title align_right">
                                                        Close
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                         
                                                    </td>
                                                    <td>
                                                         
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2" style="padding-left: 15px;">
                                                        <div id="brands">
                                                            <%#Eval("Message")%>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                         
                                                    </td>
                                                    <td>
                                                         
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2" style="text-align: center;">
                                                        <input id="btnSubmit" type="button" value="Submit" />
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    **</div>**
                                
                                
                                
                            
                            
                                
                                    <%#Eval("Name")%>
                                
                                
                                
                            
                            
                                
                                    " class="EmailLink">
                                        <%#Eval("Email")%>
                                
                                
                                
                            
                            
                                
                                
                                
                                    <%#Eval("Phone")%>
                                
                                
                            
                            
                                
                                
                                
                                    <%#Eval("Subject")%>
                                
                                
                            
                            
                                
                                    Click to Delete this Entry
                                    
                                
                                
                                
                            
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                    

Забыл закрыть div и в коде jQuery есть небольшая ошибка, которая:

 $(function() {
    $('input[id*=hello]').click(function (**e**) {
        ShowDialog(true);
        e.preventDefault();
        return false;
    });
});

e was missed. by the way thanks all............. :)

1
добавлено
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

DotNetRuChat
DotNetRuChat
2 992 участник(ов)

Чат русскоязычного .NET сообщества http://dotnet.ru/ Вам могут быть интересны: @dotnetchat, @cilchat, @fsharp_chat, @pro_net, @xamarin_russia, @microsoftstackjobs, @uwp_ru Флуд в @dotnettalks

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

Microsoft Stack Jobs
Microsoft Stack Jobs
1 788 участник(ов)

Work & freelance only Microsoft Stack. Feed https://t.me/Microsoftstackjobsfeed Чат про F#: @Fsharp_chat Чат про C#: @CSharpChat Чат про Xamarin: @xamarin_russia Чат общения:@dotnettalks

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

pro.net
pro.net
710 участник(ов)

Обсуждение .NET Framework и всего, что с ним связано. Правила: не флудить не по теме, уважать ваших коллег и никакой рекламы (объявления о вакансиях можно согласовать с @AlexFails). Флудилка: @dotnettalks Участник @proDOT

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

Microsoft Developer Community Chat
Microsoft Developer Community Chat
584 участник(ов)

Чат для разработчиков и системных администраторов Microsoft Developer Community. __________ Новостной канал: @msdevru __________ Баним за: оскорбления, мат, рекламу, флуд, флейм, спам, NSFW контент, а также большое количество оффтоп тем. @banofbot

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

.NET Talks: Force Push Masters
.NET Talks: Force Push Masters
490 участник(ов)

Свободный чат .NET разработчиков. Правила: t.me/dotnettalks/56823 Вам могут быть интересны: @dotnetruchat, @dotnetchat, @cilchat, @fsharp_chat, @pro_net, @dotnetgroup, @xamarin_russia, @microsoftstackjobs, @uwp_ru http://combot.org/chat/-1001128250813

All That JS
All That JS
417 участник(ов)

JS на русском

.NET Chat Убежище
.NET Chat Убежище
246 участник(ов)

Чат .NET разработчиков под эгидой MSK/SPB .NET Community Group Вам могут быть интересны: @fsharp_chat, @dotnetruchat, @cilchat, @xamarin_russia, @microsoftstackjobs, @dotnetgroup Флуд в @dotnettalks

.NET CIL Chat
.NET CIL Chat
54 участник(ов)

.NET CIL (aka IL aka MSIL)