显示jQuery对话框时禁用单击

我不熟悉jQuery。我正在创建一个asp.net MVC应用程序

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

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

HTML:

...

对话框工作正常。

我需要限制用户在显示对话框时不能单击页面的其他元素

此外，当用户单击其他位置（对话框外部）时，必须关闭对话框

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

 $("#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"); } } 
        });
 });

演示：

---

您可以使用对话框的

模态

属性来实现背景叠加

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

要关闭

覆盖

，您可以将对话框的

打开

中的

.ui小部件覆盖

绑定为：

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

这是你的解决方案

其他区域的恶魔点击

<div class="overlay"></div>

在这里，您可以添加一个dom以重叠另一个区域

<div class="overlay"></div>

当你打开弹出窗口时，你可以通过简单的书写来显示这个覆盖图

$('.overlay').show();    

注意：确保弹出的z索引大于覆盖

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

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

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');
   });
  });

---

您需要一个覆盖元素才能进入对话框。jQueryUI对话框有一个选项可以执行此操作，您可以使用colorbox显示对话框。它将为您提供更多功能，如iframe inline等，以打开对话框有一个选项：

modal:true

您的解决方案可以工作，但当我在对话框外单击时，对话框不会关闭！解决方案可行，但当我在对话框外单击时，对话框不会关闭！

$(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');
   });
  });