显示 jQuery 对话框时禁用单击答案

【问题标题】：Disable click when displaying jQuery dialog显示 jQuery 对话框时禁用单击
【发布时间】：2014-07-15 08:47:10
【问题描述】：

我是 jQuery 的新手。我正在创建一个 asp.net MVC 应用程序。

当用户使用以下代码单击按钮时，我正在显示一个对话框。

  $(document).ready(function () {
    $dialog = $("#quantityDialog").dialog({
      autoOpen: false,
      title: 'Add to Cart',
    });
    $('.AddToCart').on('click', function () {
      $dialog.dialog('open');
    });
  });

HTML：

<div id="quantityDialog" style="display:none">
...
</div>

对话框工作正常。

我需要限制用户在显示对话框时不能点击页面的其他元素。
此外，当用户单击其他位置（对话框外）时，必须关闭对话框。

我怎样才能做到这一点。帮帮我。

【问题讨论】：

您需要一个覆盖元素才能进入对话框下方。 jQueryUI Dialog 有一个选项可以做到这一点已经看到jqueryui.com/dialog/#modal-confirmation
您可以使用 colorbox jacklmoore.com/colorbox 显示对话框，它将为您提供更多功能，如 iframe inline 等打开对话框
有一个选项：modal: true

标签： jquery jquery-ui jquery-ui-dialog

【解决方案1】：

 $("#loadPreviewDiv").click(function () {
        $('#dialog').dialog({
            title: "Dialog box",
            height: 300,
            modal: true,
            open: function() {
            $('.ui-widget-overlay').on('click', function() {
                $('#dialog').dialog('close');
            })
        },
            buttons: { "close": function() { $(this).dialog("close"); } } 
        });
 });

演示：

http://jsfiddle.net/2hyAh/1/

【讨论】：

您的解决方案有效，但是当我在框外单击时，对话框没有关闭！

【解决方案2】：

DEMO

JS代码：

$(document).ready(function () {
    $dialog = $("#quantityDialog").dialog({
      autoOpen: false,
      modal:true,//to display an overlay
      title: 'Add to Cart',
    });

$('.AddToCart').on('click', function () {
  $dialog.dialog('open');
});



/*When clicked on overlay close the dailog*/
   $('div.ui-widget-overlay').click(function(){
       $dialog.dialog('close');
   });
  });

【讨论】：

【解决方案3】：

可以使用对话框的modal属性实现背景叠加，

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

要关闭overlay，您可以将对话框的open 中的.ui-widget-overlay 绑定为::

$("#dialog").dialog({
        ......
        open: function(){
            $('.ui-widget-overlay').on('click',function(){
                $('#dialog').dialog('close');
            });
        ....
        }

【讨论】：

解决方案有效，但是当我在框外单击时，对话框没有关闭！

【解决方案4】：

这是您的解决方案，

禁止点击其他区域

在这里你可以添加一个 dom 来覆盖另一个区域
```
<div class="overlay"></div>
```
并为这个dom编写css
```
.overlay {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
}
```
当你打开弹出窗口时，你可以通过简单地写这个来显示这个叠加层。
```
$('.overlay').show();    
```
注意：确保弹出窗口的 z-index 大于叠加层。

在弹出窗口之外单击时关闭弹出窗口

$('body').click(function(e){
    if(!$(e.target).is('.AddToCart, #quantityDialog'))
    {
        // write logic to close the popup here
        $('.overlay').hide();
    }
})

【讨论】：