Question

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

$（function（）{ $（＆＃34;＃dialog＆＃34;）。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>

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

Answer 1

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

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

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

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

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

输入框在jquertyui对话框后面仍然可见

1 个答案: