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

标签 javascript jquery html asp.net

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

Screenshot of application

一切正常。我需要在每个表单上放置一个自定义关闭按钮，以便当他们单击此按钮时，我可以从后面的代码中保存记录。我不想使用 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>

最佳答案

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

当您调用 $("#LabUsers").dialog('close'); 时，$("#LabUsers") 指的是 a ，而不是 div，并且您的对话框与 div 而不是 a 相关联。

例子:

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

http://jsfiddle.net/R5Kht/

更新

要确定您的最终目标是什么有点困难，但这里有一个使用通用事件处理程序的示例。我试图对其进行足够的评论以使其易于理解。 http://jsfiddle.net/Hsn76/3/

HTML

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

JS

// generic handler to open a dialog
$(document).on('click', '.openDialog', function(e) {   
    var target = $(this).data('target');
    $(target).dialog('open');
});


// generic event handler to close any dialog containing
// an element decorated with the closeButton class
$(document).on('click','.closeButton', function(e) {
    // find the dialog that contains this .closeButton
    var $dialog = $(this).parents('.ui-dialog-content');
    $dialog.dialog('close');
});

// create the dialogs
$('#apple,#banana').dialog({    
        // http://api.jqueryui.com/dialog/
        // the close button can be hidden via CSS & dialogClass setting 
    dialogClass: 'no-close', 
    resizable: false,
    autoOpen: false,
    modal: false,
    width: 'auto',
    height: 'auto',    
    draggable: true,
    beforeClose: function( event, ui ) {
       // call your code that triggers your save
       // if you need to interact with the iframe, maybe try this:
       // http://stackoverflow.com/a/3407632/740639
       alert('saving data...');        
    },    
    open: function (event, ui) {       
        // load the iframe's src when the dialog is opened
        var $iframe = $(this).children('iframe');
       if(!$iframe.attr('src')) {
          var src = $iframe.data('src');
          $iframe.attr('src', src);
       }
    }
});

关于javascript - jQuery 对话框的自定义关闭按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23386939/

上一篇：javascript - 焦点事件后防止点击

下一篇：jquery - Jssor slider : Responsive Code

相关文章：

javascript - jquery计算同一类不同元素的不同值

javascript - 数组的 typescript 泛型

javascript - 在另一个元素上调整一个元素的大小

javascript - 获取 HTML Body 中的 Javascript 变量

javascript - 如何滑动div，勾选输入复选框

css - 间距和分层不适用于图像和列表

javascript - 更改滚动到视口(viewport)时的事件状态

html - 在 div 中显示文本，但将其视为背景图像

javascript - Internet Explorer 中的 Bootstrap Accordion 与其他浏览器的功能不同

javascript - 使用 D3 创建多尺度、嵌套、有序条形图

©2024 IT工具网  联系我们