4

我正在使用 jQuery UI 对话框。

当我单击按钮时，应打开对话框。当对话框打开时，整个身体应该处于禁用状态。就像我们何时使用弹出窗口一样。所以为此我使用了下面的代码。

这是Js Fiddle链接

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

在这里我有问题。当我单击按钮时，弹出窗口正在打开，整个身体都被黑色背景覆盖。

现在用户应该能够以两种类型关闭。

  1. 通过单击弹出窗口中的关闭符号。
  2. 通过单击弹出窗口的外侧区域（在黑色背景上）

上面提到的第二种方法工作正常。但是在第一种方法中，当我单击关闭符号时，只有弹出窗口越来越近，黑色背景保持不变。

我已经尝试了一些方法。但它没有奏效。
请提出任何建议。

4

4 回答 4

6

您可以订阅close对话框的事件并隐藏您的背景：

$( "#dialog" ).on( "dialogclose", function( event, ui ) { 
    $( ".parentDisable" ).fadeOut(1000); 
});

http://jsfiddle.net/nRQXA/3/

更新

对话框组件中已经存在这样的功能：

  $( "#dialog" ).dialog(
    { 
       modal: true 
  });

http://jsfiddle.net/nRQXA/23/

于 2013-09-12T07:07:47.470 回答
2

以这种方式注册您的点击事件：

 $(document).on('click','.ui-button-icon-primary',function(){
        $( "#dialog" ).dialog('close');
        $( ".parentDisable" ).fadeOut(1000);
    });

工作小提琴

于 2013-09-12T07:17:15.277 回答
1

使用关闭事件注册对话框

$("#dialog").dialog({
         autoOpen: false,
         close: function (event, ui) {
             $(".parentDisable").fadeOut(1000);
         }
     });

用 open 命令打开它

 $("#dialog").dialog('open');

查看更新的小提琴

于 2013-09-12T07:10:58.607 回答
0 
  $("#dialog").dialog({
            buttons: { "Ok": function() {  $(this).dialog("close");}}
            });
于 2013-09-12T07:07:36.283 回答