我正在使用jQuery UI对话框.
当我点击按钮时,应该打开对话框.打开对话框后,整个身体应处于禁用状态.就像我们使用弹出窗口的时间一样.所以为此我使用了以下代码.
这是Js Fiddle Link
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(document).ready(function(e) {
$("#popup").click(function(){
$( "#dialog" ).dialog();
$( ".parentDisable" ).show();
});
$(".parentDisable").click(function(){
$( "#dialog" ).dialog('close');
$( ".parentDisable" ).fadeOut(1000);
});
$(".ui-button-icon-primary").click(function(){
$( "#dialog" ).dialog('close');
$( ".parentDisable" ).fadeOut(1000);
});
});
</script>
<style>
.parentDisable{
position:fixed;
top:0;
left:0;
background:#000;
opacity:0.8;
z-index:1;
height:100%;
width:100%;}
</style>
</head>
<body>
<div id="dialog" title="Basic dialog" style="display:none;">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<div class="parentDisable" style="display:none;"></div>
<span id="popup" style="color:blue;cursor:pointer">Pop Up</span>
</body>
</html>
我有问题.当我点击按钮弹出打开,整个身体覆盖着黑色背景.
现在用户应该能够关闭两种类型.
上面提到的第二种方式工作正常.但是在第一种方法中,当我点击关闭符号时,只有POPUP越来越近,黑色背景保持不变.
我曾在某些方面尝试过.但它没有奏效.
请提出任何建议.
您可以订阅close对话框的事件并隐藏您的背景:
$( "#dialog" ).on( "dialogclose", function( event, ui ) {
$( ".parentDisable" ).fadeOut(1000);
});
更新
对话框组件中已存在此类功能:
$( "#dialog" ).dialog(
{
modal: true
});
| 归档时间： |
|
| 查看次数： |
1271 次 |
| 最近记录： |