web-dev-qa-db-ja.com

jQuery-DIVをオーバーレイに配置するにはどうすればよいですか？

私のプロジェクトには既にjQueryが少なすぎるため、モーダルダイアログをできる限りjQueryコードで作成しようとしています。

したがって、私は最初にオーバーレイが必要でした、それは以下で達成されます：

$('body').wrapInner('<div />')
.css('opacity','0.5')
.css('z-index','2')
.attr('id','dim1');

このモーダルが存在するときに＃dim1のクリックイベントを強制終了する別のルーチンがあるので、今は無視してください。ですから、モーダルダイアログを上に描画する必要があります。

$('body').append('<div id="test">My Test</div>');
$('#test')
.css('opacity','1.0')
.css('position','fixed')
.css('color','#000')
.css('z-index','2000')
.css('height','300px')
.css('width','300px')
.css('top','50%')
.css('left','50%');

ただし、これを行うと、＃testが淡色表示になってしまいます。淡色表示にしたくない場合は、その背後にあるものだけです。トリックは何ですか？

jqueryoverlay
16
volomike

この簡単な demo を参照してください。ここで重要なのは、モーダルが不透明な背景の上に絶対的に存在することです。デモでは、背景オーバーレイdivとモーダルdivを本体に動的に追加しますが、これらをhtmlで定義して表示することもできます。

モーダル効果にはプラグインを使用する必要がないことに同意します。ほとんどのプラグインには多くのオプションが付属しているため、最も単純な効果だけが必要な場合は必要ない膨らみです。 -これを3行ではなく2行で行うことができます-プラグインなしで!!

また、スクリプトの要素にインラインスタイルを追加するよりも、CSSクラスを定義してこれらを追加する方がはるかに簡単です。メンテナンスが簡単です。

19
redsquare

あなたの最善の解決策はjqueryプラグインを使用することかもしれません。簡単なグーグル検索がこれを投げかけました： http://www.ericmmartin.com/simplemodal/ これは3行で必要なことをしています！

さらに必要な場合は、 jquery overlaysプラグインページにロードがあります

見た目から見て、CSSは物事を正しくするための鍵であり、これらの例のほとんどは、ユーザーが適応できるデモCSSが付属しているはずです。

明らかにこれはあなたが懸念しているより多くの外部jqueryコードをもたらします-しかし私はよく書かれた安定したプラグインがあなたに多くの仕事/時間/コードの行を節約することを提案します！

5
Jennifer