JQuery对话框 - 不开放第二次

Question

有关主题的StackOverflow上有几个职位，但没有答案帮助我。 我正在使用通过DataAdapter由SELECT填充的DataList控件。 一个概念建议只有一个对话框的实例必须是开放的，但不能应用此方法

的HTML的结构是：

<asp:DataList ID="DataList" runat="server"> 
     <ItemStyle /> 
     <ItemTemplate> 
      <a href="" class="link"/></a> 
      <div class = "dialog" id="dynamicID" style="display:none"> 
      </ div> 
     </ ItemTemplate> 
    </ asp: DataList> 

我使用jQuery的代码是：

<script language="javascript" type="text/javascript"> 
    $ (function() { 
     $ (". link. ") click (function() { 
      var id = '#' + ($ (this). siblings ('. dialog'). attr ('id')); 
      $ (id). dialog ({ 
       AutoOpen: false, 
       closeOnEscape: true, 
       resizable: false, 
       draggable: false, 
       modal: true, 
       width: 800, 
       height: 600, 
       overlay: {backgroundColor: "# 000", opacity: 0.5}, 
       top: 20, 
       show: 'fade', 
       hide: 'fade', 
       buttons: { 
        "Close": function() { 
         $ (id). dialog ('close'); 
        } 
       } 
      }); 
      $ (id). dialog ('open'); 
     }); 
    }); 
</ script> 

Answer 1

想象一下HTML

<asp:DataList ID="dataList" runat="server"> 
    <ItemTemplate> 
     <div class="row"> 
      <p> 
       Result: <strong> 
        <%# Container.DataItem.ToString() %></strong></p> 
      <a href="#" class="link" data-open="dialog_<%# Container.ItemIndex %>" />Click 
      To Open</a> 
      <div class="dialog" id="dialog_<%# Container.ItemIndex %>"> 
       <h2> 
        This is the text inside the dialog # 
        <%# Container.ItemIndex %>.</h2> 
       <p> 
        &nbsp; 
       </p> 
      </div> 
     </div> 
    </ItemTemplate> 
</asp:DataList> 

与此的JavaScript

$(function() { 

    // create dialogs 
    $(".dialog").dialog({ 
     autoOpen: false, 
     closeOnEscape: true, 
     buttons: { 
      "Close": function() { 
       $(id).dialog('close'); 
      } 
     } 
    }); 

    // hook up the click event 
    $(".link").bind("click", function() { 
     // console.log($(this).parent()); 
     // open the dialog 
     var dialogId = $(this).attr("data-open"); 
     $("#" + dialogId).dialog("open"); 

     return false; 
    }); 

}); 

工作可爱。

工作实例can be found here

什么是你的方法不对？

你正在对话框的内部创建一个方法，这应该在$(document).ready()的内部创建，这样，每次点击时，它都会创建一个对话框，但是......它已经存在并且将一切都搞砸了。

当对话框中工作：

• 首先，您使用创建它们.dialog()
• 你只需要使用.dialog('open')，使该对话框中可见
• 并使用.dialog('close')来隐藏对话框

默认情况下为

jQuery UI CSS将自动配置对话框（display:none;），因此您无需执行任何操作就像那样。

Answer 2

当对话框显示时，它从标记流程中退出。所以当你拨打var id = '#' + ($ (this).siblings('.dialog').attr('id'));你什么都没有。您可以在对话框的ID第一次打开时添加对话框的ID，然后如果$(this).siblings ('.dialog')结果为空，您可以从数组中获得对话框元素ID。

<script type="text/javascript"> 
     var registeredDialogs = []; 

     function registerDialog(link, dialogDiv) { 
      var linkId = $(link).attr("id"); 
      if (!registeredDialogs[linkId]) 
       registeredDialogs[linkId] = dialogDiv; 
     } 

     function getDialog(link) { 
      var linkId = $(link).attr("id"); 
      return this.registeredDialogs[linkId]; 
     } 

     $(function() { 
      $(".link").click(function() { 

       var dialogDiv = $(this).siblings('.dialog'); 
       if (dialogDiv.length !== 0) { 
        registerDialog(link, dialogDiv); 
       } 
       else { 
        dialogDiv = this.getDialog(link); 
       } 

       dialogDiv.dialog({ 
        AutoOpen: false, 
        closeOnEscape: true, 
        resizable: false, 
        draggable: false, 
        modal: true, 
        width: 800, 
        height: 600, 
        overlay: { backgroundColor: "# 000", opacity: 0.5 }, 
        top: 20, 
        show: 'fade', 
        hide: 'fade', 
        buttons: { 
         "Close": function() { 
          $(id).dialog('close'); 
         } 
        } 
       }); 
       $(id).dialog('open'); 
      }); 
     }); 
    </script> 

Answer 3

通常只要销毁关闭的对话框就可以解决问题。

$("#dialogbox").dialog({ 
    close: function (event, ui) { 
     $(this).dialog("destroy"); 
    } 
});