jquery - 单击“窗口区域”时如何关闭Jquery弹出窗口以及如何使背景变暗？

Question

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

<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 件事？

Answer 1

要在单击外部时关闭对话框，请在此处查看答案：jQuery UI - 单击外部时关闭对话框

要更改背景，请查看主题滚轮 http://jqueryui.com/themeroller/以及覆盖和阴影类部分

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

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