Question

我是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>

对话框工作正常。

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

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

Answer 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/

Answer 2

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

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

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

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

Answer 3

这是您的解决方案，

点击其他区域

在这里你可以添加一个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();
    }
})

Answer 4

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

显示jQuery对话框时禁用单击

4 个答案: