JQuery модальный диалог не стрелять по изображению нажмите кнопку

Question

Я использую страницы содержания asp.net вместе с JQuery. Я новичок в JQuery и использую datepicker и модальный диалог. Datepicker работает нормально, но модальный диалог не работает, если я удалил строку autoOpen:false из фрагмента кода, который я привел ниже. Мне нужно, чтобы модальный диалог срабатывал, когда я нажимаю кнопку изображения.

Пожалуйста, помогите мне в этом, следуя моему коду jquery.

$(function() { 
    var dialogshow = true; 
    if (dialogshow) { 
    $('#dialog').dialog({ 
     autoOpen: false, 
     width: 600, 
     closeOnEscape: true, 
     resizable: false, 
     draggable: true, 
     modal: true, 
     title: 'Add New Project', 
     show: { 
     effect: 'blind', 
     duration: 1000 
     }, 
     hide: { 
     effect: 'explore', 
     duration: 1000 
     } 
    }); 
    } 
}); 

$("#ImgProjAdd").click(function() { 
    $("#dialog").dialog("open"); 
    return false; 
}); 

//my asp.net code to generate image button 
<asp:ImageButton ID="ImgProjAdd" runat="server" ImageUrl="~/images/plus2.png" /> 

Answer 1

function OpenJqueryDialog() { 
      $('#dialog').dialog({ autoOpen: false, bigframe: true, modal: true, width: 450, closeOnEscape: true, resizable: false, show: { effect: 'blind', duration: 1000 }, hide: { effect: 'explore', duration: 1000} }); 
      $('#dialog').dialog('open'); 
         $("#iframe").attr('src', 'AddProject.aspx'); 
      return false; 
     } 

<div id="dialog" title="Add New Project" style="width: 600px; height: 250px; display: none;"> 
      <iframe id="iframe" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="0" 
       scrolling="no" title="Add New Project"></iframe> 
     </div> 

<asp:ImageButton ID="ImgProjAdd" runat="server" OnClientClick="return OpenJqueryDialog();" 
             ImageUrl="~/images/plus2.png" /> 

Answer 2

"жерех: ImageButton" не будет генерировать один и тот же идентификатор = 'ImgProjAdd', когда DOM загружен. Просмотрите источник страницы и навигацию в «ImgProjAdd», вы увидите, что к ней добавляется значение. Вы должны написать свою функцию «щелчка» для этого сгенерированного идентификатора.

Answer 3

Вместо $("#ImgProjAdd") попробуйте воспользоваться переключателем «Ends With» $("[ID$=ImgProjAdd]").

Идентификаторы управления модифицируются каркасом .Net и обычно сгенерированный идентификатор заканчивается идентификатором, который вы использовали.

Во-вторых, переместите определение щелчку внутри $(...) так:

$(function() { 
    var dialogshow = true; 
    if (dialogshow) { 
    $('#dialog').dialog({ 
     autoOpen: false, 
     width: 600, 
     closeOnEscape: true, 
     resizable: false, 
     draggable: true, 
     modal: true, 
     title: 'Add New Project', 
     show: { 
     effect: 'blind', 
     duration: 1000 
     }, 
     hide: { 
     effect: 'explore', 
     duration: 1000 
     } 
    }); 
    } 

    $("[ID$=ImgProjAdd]").click(function() { 
     $("#dialog").dialog("open"); 
     return false; 
    }); 
});