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

任何帮助，将不胜感激。

编辑： 感谢您的帮助...这已经解决了问题但是我刚刚发现如果用户在对话框可见时向下滚动屏幕，正在显示的页面的新部分将变灰。

此 modal:true 似乎仅适用于当前正在查看的内容 - 有谁知道将其应用于整个页面的方法？再次感谢

4

3 回答 3

2

像这样使用它：

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

基本上 modal:true 告诉小部件是否必须在背景中显示一些叠加层，否则它将作为一个简单的对话框打开。

你可以在这里找到文档

于 2013-03-14T12:01:27.677 回答
1

看看背景 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}*/;
}

更改...

于 2013-03-14T12:00:12.707 回答
1

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

$(function() {
    $("#dialog").dialog({
        modal: true
    });
});
于 2013-03-14T12:02:03.293 回答