Question

 <script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>
</head>
<body>

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, re-sized and closed with the 'x' icon.</p>
</div>

在您正在查看的页面的屏幕上显示一个对话框。

我想在对话框出现时将背景页面变灰。我查看了文档，但没有看到任何对背景颜色的引用。

http://api.jqueryui.com/dialog/

任何帮助都将不胜感激。

修改感谢帮助人......这解决了问题，但是我刚刚发现，如果用户在对话框可见的情况下向下滚动屏幕，则显示的页面的新部分将灰显。

此模态：true似乎仅适用于当前正在查看的内容 - 是否有人知道将其应用于整个页面的方法？再次感谢

Answer 1

像这样使用：

<script>
  $(function() {
   $( "#dialog" ).dialog({modal: true});
 });
</script>

基本上模态：true告诉窗口小部件是否必须在后台显示一些叠加层，否则它将作为一个简单的对话框打开。

您可以找到文档here

Answer 2

看看背景css，它有ui-widget-overlay类：

.ui-widget-overlay {
    background: #aaaaaa/*{bgColorOverlay}*/ url(images/ui-bg_flat_0_aaaaaa_40x100.png)/*{bgImgUrlOverlay}*/ 50%/*{bgOverlayXPos}*/ 50%/*{bgOverlayYPos}*/ repeat-x/* {bgOverlayRepeat}*/;
    opacity: .3/*{opacityOverlay}*/;
    filter: Alpha(Opacity=30)/*{opacityFilterOverlay}*/;
}

改变它......

Answer 3

将modal属性设置为true（如documentation所示）：

$(function() {
    $("#dialog").dialog({
        modal: true
    });
});

在对话框上。更改背景颜色:(编辑）到整个文档

3 个答案: