Question

我正在使用asp.net内容页面和Jquery。我是Jquery的新手并且使用了datepicker和模态对话框。如果我从下面分享的代码片段中删除了行autoOpen:false，则Datepicker工作正常，但模态对话框无法正常工作。我点击图片按钮时需要模态对话框。

请帮我这个，以下是我的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

“asp：ImageButton”在加载DOM时不会生成相同的ID ='ImgProjAdd'。查看您的页面源并导航到'ImgProjAdd'，您将看到一个值前置。您应该为生成的ID编写“点击”功能。

Answer 2

而不是$("#ImgProjAdd")首先尝试使用“Ends With”选择器$("[ID$=ImgProjAdd]")。

控制ID由.Net框架修改，通常生成的id以您使用的ID结束。

其次，在$(...)内移动点击的定义，如下所示：

$(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;
    });
});

Answer 3

  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" />

单击图像按钮时不会触发Jquery模式对话框

3 个答案: