0

我使用了 jqueryui 对话框。页面中有输入框。当单击链接时出现对话框时，从对话框后面可以看到输入框，从而导致对话框正文文本的可见性不佳等。

$(function() { $( "#dialog" ).dialog(); });

HTML：

<input type="text" value="" class="input_box" />
<input type="text" value="" class="input_box" /><input type="text" value="3" class="input_box" />
<input type="text" value="" class="input_box" /><input type="text" value="3" class="input_box" />
<input type="text" value="" class="input_box" /><input type="text" value="3" class="input_box" />
<input type="text" value="" class="input_box" /><input type="text" value="3" class="input_box" />
<input type="text" value="" class="input_box" /><input type="text" value="3" class="input_box" />
<input type="text" value="" class="input_box" /><input type="text" value="3" class="input_box" />
<input type="text" value="" class="input_box" />

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

如何避免输入框扭曲模态窗口主体部分？

4

1 回答 1

0

如果您指定modal:true背景将变灰。

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

如果您希望隐藏整个背景，您可以使用 CSS 将叠加层更改为纯色：

.ui-widget-overlay{
    background: gray;
    opacity: 1;
}

JSFiddle：http: //jsfiddle.net/WBstB/1/

于 2013-08-25T13:52:14.190 回答