单击“窗口区域”时如何关闭Jquery弹出窗口以及如何使背景变暗？ [复制]答案

【问题标题】：How to close Jquery popup window when clicking of the "window area" and how to make the background dull? [duplicate]单击“窗口区域”时如何关闭Jquery弹出窗口以及如何使背景变暗？ [复制]
【发布时间】：2013-10-22 13:11:41
【问题描述】：

我在这里有一个弹出框，我想做两件事。首先，当显示弹出窗口时，我希望“弹出窗口之外的区域”显示得更暗一些。其次，我希望在单击它的区域时关闭弹出窗口。这是我的脚本：

<script>
$("a").click(function(event) 
{
  $(this).parent().parent().children(".dialog").dialog(
  {
    width: 600,
    close: function( event, ui ) 
    {
      $(this).dialog('destroy');
    }
  });
});
</script>

还有我的html代码：

  <div class="content">
     <h4>
        <a href="#" >AAAA </a> 
    </h4> 
    <img src="AAAA.jpg" />
    <div class="dialog" title="AAAA" >text
    </div>
  </div>

在 jquery 中是否有特定的函数可以完成这 2 件事？

【问题讨论】：

请不要通过破坏您的帖子为他人增加工作量。通过在 Stack Exchange 网络上发帖，您已在 CC BY-SA 4.0 license 下授予 Stack Exchange 分发该内容的不可撤销的权利（即无论您未来的选择如何）。根据 Stack Exchange 政策，帖子的非破坏版本是分发的版本。因此，任何破坏行为都将被撤销。如果您想了解更多关于删除帖子的信息，请参阅：How does deleting work?

标签： jquery popup click

【解决方案1】：

要在点击外部时关闭对话框，请在此处查看答案：jQuery UI - Close Dialog When Clicked Outside

要更改背景，请查看 themeroller http://jqueryui.com/themeroller/ 和 Overlay and Shadow Classes 部分

【讨论】：

回答了第二个问题。对于第一个，我想检查他的 html 以了解我的代码对应的名称

【解决方案2】：

试试这个 JS：

$("a").click(function(event) 
{
  $(this).parent().parent().children(".dialog").dialog(
  {
      width: 600,
      modal: true,
      close: function( event, ui ) {
          $(this).dialog('destroy');
      },
      open: function(event, ui) {
          $('.ui-widget-overlay')
          .bind('click', 
                function() { 
                    $(".dialog").dialog('close'); });
      }
  });
});

还有这个 CSS：

.ui-widget-overlay {
    opacity: 0.7;
    background-color: #000000;
}

JSFiddle：http://jsfiddle.net/kBMW2/

（您需要添加自己的样式等）

【讨论】：