更新

Question

我正在使用jQuery daialog来显示ASP.net应用程序中的表单。

Screenshot of application

一切都很好。我需要在每个表单上放置一个自定义关闭按钮，这样当他们单击此按钮时，我可以从后面的代码中保存记录。我不想使用内置Exit按钮的jQuery。创建对话框的代码如下：

jQuery(function (e) {
            $("a").each(function () {
                e.data(this, 'dialog',
                  $(this).next("div").dialog({
                      resizable: false,
                      autoOpen: false,
                      modal: false,
                      title: this.id,
                      width: 900,
                      height: 590,

                      position: ['middle', 150],
                      draggable: true,

                      open: function (event, ui) {
                          $(this).parent().children().children(".ui-dialog-titlebar-close").hide();
                      },

                      //buttons: {
                      //    "Exit": function () {                              
                      //        $(this).dialog("close");                              
                      //    }
                      //}
                  }));

            }).click(function (event) {
                if (this.id != '#') {
                    document.getElementById('frame_' + this.id).src = this.id + '.aspx';
                    e.data(this, 'dialog').dialog('open');                    
                    return false;
                }
            });        

        });

我用来关闭对话框的代码：

  function CloseDialog()
    {
        $("#LabUsers").dialog('close');
    }

无效。

父页面的整个代码如下：

    <!DOCTYPE html>
<html>
<head>
    <title>

    </title>
    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/jquery-ui.js"></script>
    <link href="Scripts/themes/jquery-ui.css" rel="stylesheet" />
    <link href="Scripts/themes/jquery-ui.min.css" rel="stylesheet" />
    <link href="Scripts/themes/jquery.ui.theme.css" rel="stylesheet" />
    <link href="Scripts/Site.css" rel="stylesheet" />
    <link rel="stylesheet" href="Scripts/style.css" type="text/css" />


    <script>


        jQuery(function ($) {
            $("a").each(function () {
                $.data(this, 'dialog',
                  $(this).next("div").dialog({
                      resizable: false,
                      autoOpen: false,
                      modal: false,
                      title: this.id,
                      width: 900,
                      height: 590,

                      position: ['middle', 150],
                      draggable: true,
                      open: function (event, ui) {
                          $(this).parent().children().children(".ui-dialog-titlebar-close").hide();
                      },

                     // buttons: {
                     //     "Exit": function () {
                     //         $(this).dialog("close");
                     //     }
                     // }
                  })

                );

            }).click(function (event) {
                if (this.id != '#') {
                    $.data(this, 'dialog').dialog('open');
                    document.getElementById('frame_' + this.id).src = this.id + '.aspx';
                    return false;
                }
            });
        });

        $(document).ready(function () {
            $("iframe").attr("scrolling", "no");
            $("iframe").attr("frameborder", "0");
        });

function CloseDialog(id)
    {
        $(id).dialog('close');
    }


    </script>

</head>

<body>

    <div class="center">

        <div id="menu1" class="menu">
            <ul id="nav">
                <li>
                    <a id="#">Log Samples</a>
                    <div id="#"><iframe class="framestyle" id="frame_#"></iframe> </div>
                    <ul>
                        <li>
                            <a id="#">Commercial</a>
                            <div id="#"><iframe class="framestyle" id="frame_#"></iframe> </div>
                            <ul>
                                <li>
                                    <a id="LogSamples">Log Samples</a>
                                    <div id="LogSamples"><iframe class="framestyle" id="frame_LogSamples"></iframe> </div>
                                </li>
                                <li>
                                    <a id="Customers">Customers</a>
                                    <div id="Customers"><iframe class="framestyle" id="frame_Customers"></iframe> </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                <li>
                    <a id="#">Admin</a>
                    <div id="#"><iframe class="framestyle" id="frame_#"></iframe> </div>
                    <ul>
                        <li>
                            <a id="LabUsers">Lab Users</a>
                            <div id="LabUsers"><iframe class="framestyle" id="frame_LabUsers"></iframe> </div>
                        </li>
                        <li>
                            <a id="LabRoles">Lab Roles</a>
                            <div id="LabRoles"><iframe class="framestyle" id="frame_LabRoles"></iframe> </div>
                        </li>
                        <li>
                            <a id="ScreenForRoles">ScreenForRoles</a>
                            <div id="ScreenForRoles"><iframe class="framestyle" id="frame_ScreenForRoles"></iframe> </div>
                        </li>
                    </ul>
            </ul>
        </div>

    </div>

    <div id="header">
        <div style="width: 100%;">
            <div class="MainTitle" style="position: relative; float: right;">
                           </div>
            <div class="MainTitle" style="position: relative; float: left; vertical-align: central; line-height: 80px; margin-top: 25px;">

            </div>
        </div>
    </div>

</body>
</html>

子表格的代码如下：

    <%@ Page Title="About Us" Language="C#" AutoEventWireup="true" CodeBehind="LabRoles.aspx.cs" Inherits="Company.LabRoles" %>
<!doctype html>
<html lang="en">
<head runat="server">
    <meta charset="utf-8">
    <title></title>

    <script src="../View/Content/JScript/jquery-1.7.2.js"></script>
    <script src="../View/Content/JScript/jquery-ui.js"></script>
    <link href="../View/Content/themes/jquery-ui.css" rel="stylesheet" />
    <link href="../View/Content/Styles/Site.css" rel="stylesheet" />
    <link href="../View/Content/themes/jquery.ui.theme.css" rel="stylesheet" /> 


    <script>

        function CloseThisForm()
        {
            parent.CloseDialog("#LabRoles");
        }

    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div style="height: 510px; margin: 16px;">
            <div style="height: 450px; background: none;">
                <div style="text-align: left;">
                    <asp:TextBox ID="txtSearch" runat="server" />
                    <asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" CssClass="button" />
                    <asp:HiddenField ID="hdnvalue" runat="server" ClientIDMode="Static" />
                </div>
                <br />
                <asp:GridView ID="gvRoles" runat="server" AutoGenerateColumns="False" BackColor="#d8e8ff" Width="100%"
                    RowStyle-Height="20" OnPageIndexChanging="gvRoles_PageIndexChanging" DataKeyNames="WM_RoleId"
                    EmptyDataText="There are no data records to display." OnRowDataBound="gvRoles_RowDataBound"
                    AllowPaging="true" ForeColor="Black"
                    OnSelectedIndexChanged="gvRoles_SelectedIndexChanged" PageSize="15">

                    <Columns>
                        <asp:BoundField DataField="WM_RoleName" HeaderText="Role Name" HeaderStyle-HorizontalAlign="Center"
                            ItemStyle-HorizontalAlign="Left" ItemStyle-Width="100">
                            <HeaderStyle HorizontalAlign="Left"></HeaderStyle>
                        </asp:BoundField>
                    </Columns>
                </asp:GridView>

            </div>

            <div style="text-align: center; height: 20px;">

                <asp:Button ID="Button1" OnClientClick ="CloseThisForm(); return false;"  runat="server" Text="Close" />
                <asp:Button ID="btnInsert" runat="server" Text="Add New" CssClass="button" />
                <asp:Button ID="BtnDelete" runat="server" Text="Delete" CssClass="button" OnClientClick="return confirm('Do you want to delete this record? Click OK to proceed.');"
                    OnClick="BtnDelete_Click" />
                <asp:Button ID="btnEdit" runat="server" Text="Details" Visible="true"
                    CssClass="button" />

            </div>
        </div>
    </form>
</body>
</html>

Answer 1

问题如同Irvin所说，每个元素必须具有唯一的id属性。

当您致电$("#LabUsers").dialog('close');时，$("#LabUsers")引用a，而不是div，您的对话框与div而不是{{}相关联1}}。

示例：

http://jsfiddle.net/R5Kht/

更新

确定您的最终目标有点困难，但这是一个使用通用事件处理程序的示例。我试图评论它足以让它变得可以理解。 http://jsfiddle.net/Hsn76/3/

HTML

<a id="apple" data-fruit="apple">aaaaa</a>
<div id="apple" data-fruit="orange">bbbbb</div>

var fruit = $('#apple').data('fruit');
console.log(fruit); // returns 'apple'

JS

<!-- the data-target attribute defines the selector for the element that will host the dialog -->
<a class="openDialog" href="javascript:;" data-target="#apple">Apple</a> 

<a class="openDialog" href="javascript:;" data-target="#banana">Banana</a>

<div id="apple" class="hidden">
    <a class="closeButton" href="javascript:;">Close Dialog</a>
    <!-- the data-src attribute defines the iframe's source, but the contents are not actually loaded until the dialog 'open' event occurs -->
    <iframe class="dialog-iframe" data-src="http://blog.jsfiddle.net/"></iframe>
</div>

<div id="banana" class="hidden">
    <a class="closeButton" href="javascript:;">Close Dialog</a>
    <iframe class="dialog-iframe" data-src="http://doc.jsfiddle.net/"></iframe>
</div>

Answer 2

初始化对话框时添加此事件

beforeClose:function(event,ui){ }

示例：

$(this).next("div").dialog({
   ...
   beforeClose:function(event,ui){ 
        //your code to save data
   }
});

Answer 3

我想你是想要一种方法来动态地向你的jQuery对话框添加close按钮附加点击事件，以便他们关闭dialog框。

将属性data-id提供给您的<a>元素，并将相同的data-id提供给您的close事件被委派的元素。

HTML：

......
.....
<a data-id="#LabUsers">Lab Users</a>
<div id="LabUsers">
     <iframe class="framestyle" id="frame_LabUsers"></iframe> 
</div>
......
.....

JS：

$("a").each(function () {
  var data_id = $(this).data('id');
  $.data(this, 'dialog',
    $(this).next("div").dialog({
     ....

     create: function (event, ui) {
        $('.ui-dialog-titlebar').css({'background':'none','border':'none'});
        $(".ui-dialog-titlebar").html('<a href="#" role="button"><span class="myCloseIcon" data-id="'+data_id+'">close</span></a>');
     },
         .....
         .....

 });
    //Event handler to close dialog
    $("span.myCloseIcon").click(function() {
        $($(this).data('id')).dialog( "close" ); //$('#LabUsers').dialog('close') for data-id #LabUsers
    });
});

jQuery对话框的自定义关闭按钮？

3 个答案:

更新

HTML

JS

HTML：

JS：