16

私のプロジェクトにはすでに 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 を淡色表示にしたくない場合に、#test が淡色表示になってしまいます。その背後にあるものだけです。トリックは何ですか？

4

2 に答える 2

19

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

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

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

于 2008-12-20T09:53:46.283 に答える
5

あなたの最善の解決策は、jquery プラグインを使用することだと思います。Google ですばやく検索すると、 http ://www.ericmmartin.com/simplemodal/ が表示されました。 これは、必要なことを 3 行で実行しています。

さらに必要な場合は、jquery オーバーレイ プラグイン ページに負荷がかかります

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

明らかに、これはあなたが懸念しているより多くの外部jqueryコードをもたらします-しかし、よく書かれた安定したプラグインは、多くの作業/時間/コード行を節約することをお勧めします!

于 2008-12-20T09:41:03.643 に答える