JQuery對話框 - 不開放第二次

有關主題的StackOverflow上有幾個職位，但沒有答案幫助我。我正在使用通過DataAdapter由SELECT填充的DataList控件。一個概念建議只有一個對話框的實例必須是開放的，但不能應用此方法JQuery對話框 - 不開放第二次

的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>

來源

2011-06-08 Winston

[jQuery的用戶界面對話框不開放的第二時間]的可能的複製（http://stackoverflow.com/questions/8700495/jquery-ui-dialog-not-opening-a-second-time） – RMalke 2016-01-30 21:22:31

想象一下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;），因此您無需執行任何操作就像那樣。

來源

2011-06-08 13:41:48 balexandre

行！應用此代碼完美工作。 – Winston 2011-06-08 14:42:54

我有這個相同的錯誤，謝謝！ – asawyer 2011-11-18 19:33:48

當對話框顯示時，它從標記流程中退出。所以當你撥打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>

來源

2011-06-08 13:07:34

通常只要銷燬關閉的對話框就可以解決問題。

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

來源

2013-05-17 15:58:25 John

JQuery對話框 - 不開放第二次

回答

相關問題