jquery-ui - jQuery对话框-第二次未打开

Question

关于此主题的StackOverflow上有几篇文章，但是没有答案对我有帮助。
我正在使用由SELECT通过DataAdapter填充的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;
    });

});

很可爱。

Working example can be found here

您的方法有什么问题？

您在方法内部创建对话框，并且应该在 $(document).ready()内部创建该对话框，因此，每次单击时，它都会创建一个对话框，但是...该对话框已经存在并固定了所有内容。

使用对话框时:

首先，您使用.dialog()创建它们

您只需要使用.dialog('open')使该对话框可见

并使用.dialog('close')隐藏该对话框

默认情况下，jQuery UI CSS将自动配置对话框( display:none;)，因此您无需执行任何操作。