jQuery UI对话框手动关闭使用手册

Question

jQuery UI对话框手动关闭使用手册

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>

我有一个问题。当我点击按钮时，弹出窗口会打开并覆盖整个页面。

现在用户应该有两种关闭方式：

点击弹出窗口中的关闭符号。
点击弹出窗口外部区域（黑色背景）。

上述第二种方法可以正常工作。但是，在第一种方法中，当我点击关闭符号时，只有弹出窗口关闭了，而黑色背景仍然存在。

我已经尝试过一些方法，但都没有起作用。
请给出任何建议。

- Sree ram

4个回答

2

按照以下方式注册您的点击事件：

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

使用Fiddle进行编码

- Greenhorn

1

注册对话框并带有关闭事件。

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

用打开命令打开它

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

检查更新的fiddle。

- Chirag Vidani

0

  $("#dialog").dialog({
            buttons: { "Ok": function() {  $(this).dialog("close");}}
            });

- Shashank

你的回答与我的问题无关，但是通过你的回答我得到了一些信息。谢谢！ - Sree ram

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Samich · Accepted Answer

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

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

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

更新

这种功能已经存在于对话框组件中：

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

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