javascript jQuery 对话框的自定义关闭按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23386939/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-28 00:48:09 来源:igfitidea点击:
Custom close button for jQuery dialog?
提问by sony
I am using jQuery daialog for showing the forms in an ASP.net application.
我正在使用 jQuery daialog 来显示 ASP.net 应用程序中的表单。
Everything is working fine. I need to place a custom close button on each form so that when they click this button, I can save the record from code behind. I don't want to use the jQuery built in Exit button. The code for creating the dialog is below:
一切正常。我需要在每个表单上放置一个自定义关闭按钮，以便当他们单击此按钮时，我可以从后面的代码中保存记录。我不想使用 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;
}
});
});
The code I use for closing the dialog :
我用于关闭对话框的代码：
function CloseDialog()
{
$("#LabUsers").dialog('close');
}
is not working.
不管用。
The entire code for parent page is below:
父页面的完整代码如下：
<!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>
The code for the child form is below:
子窗体的代码如下：
<%@ 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>
采纳答案by Walter Stabosz
The problem is as Irvin says, each element must have a unique idattribute.
问题是正如 Irvin 所说，每个元素都必须有一个唯一的id属性。
When you call $("#LabUsers").dialog('close');, $("#LabUsers")refers to the a, not the div, and your dialog is associated with the divnot the a.
当您调用时$("#LabUsers").dialog('close');，$("#LabUsers")指的是 the a，而不是 the div，并且您的对话框与divnot the相关联a。
Example:
例子：
<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'
Update
更新
It's a bit difficult to determine what your ultimate goal is, but here is an example that uses generic event handlers. I tried to comment it enough to make it understandable. http://jsfiddle.net/Hsn76/3/
确定您的最终目标是什么有点困难，但这里有一个使用通用事件处理程序的示例。我试图对其进行足够的评论以使其易于理解。 http://jsfiddle.net/Hsn76/3/
HTML
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
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);
}
}
});
回答by Aditya
I guess you are asking for a way to add a closebutton to your jQuery dialog box dynamically and then
attach a click event such that they close your dialogbox.
我猜您是在寻求一种方法来close动态地将按钮添加到您的 jQuery 对话框，然后附加一个单击事件，以便它们关闭您的dialog框。
Give an attribute data-idto your <a>element and give the same data-idto the element to which your close event is delegated.
data-id为您的<a>元素提供一个属性，并为data-id您的关闭事件委托给的元素提供相同的属性。
HTML:
HTML：
......
.....
<a data-id="#LabUsers">Lab Users</a>
<div id="LabUsers">
<iframe class="framestyle" id="frame_LabUsers"></iframe>
</div>
......
.....
JS:
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
});
});
回答by G Ravinder
add this event when you intialize the dialog
初始化对话框时添加此事件
beforeClose:function(event,ui){ }
example:
例子：
$(this).next("div").dialog({
...
beforeClose:function(event,ui){
//your code to save data
}
});
