0

jqueryui dialogを使用しました。ページ内に入力ボックスがあります。リンクをクリックしてダイアログが表示されると、入力ボックスがダイアログ本体の後ろから見えて、ダイアログ本体のテキストなどが見えにくくなります。

$(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

If you specify modal:true the background will be grayed out.

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

If you want the entire background to be hidden you can change the overlay to a solid color using CSS:

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

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

于 2013-08-25T13:52:14.190 に答える