jQueryの - どのように私はオーバーレイでDIVを置きますか？

Question

私のプロジェクトはすでに少しあまりにも多くのjQueryのそれにロードされたため、

私はできるだけjQueryのコードの最低額でモーダルダイアログを作成しようとしています。

だから、私が最初に達成されたオーバーレイを、必要に応じます：

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

今、私はこのモーダルが存在している間に＃1 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で終わります。トリックは何ですか？

Answer 1

このクイックデモをここで、不透明な背景の上に絶対的なものモーダルの鍵と嘘。デモを動的背景オーバーレイのdivと体へのモーダルのdivを追加しますが、あなたはHTMLでこれらを定義し、ちょうどそれらを示すことができます。

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

また、CSSクラスを定義し、これらを追加するのではなく、スクリプト内の要素にインラインスタイルを追加することがはるかに簡単です。保守が簡単ます。

Answer 2

私はあなたの最善の解決策は、jQueryプラグインを使用するかもしれないと思います。簡単にGoogle検索が投げたこの： http://www.ericmmartin.com/simplemodal/するましたあなたが3行に必要なものをやっている！

あなたには、いくつかのより多くをしたい場合は、 jqueryの/ <プラグインのページをオーバーレイA>

はそれを見てから、CSSは、物事が右に取得するための鍵であり、これらの例のほとんどは、あなたが適応するためのデモCSSが付属していなければなりません。

あなたのコードの作業/時間/行の多くを救うだろうが、私にはよく書かれており、安定したプラグインをお勧めします。

-

これは明らかにあなたが心配している複数の外部のjQueryコードをもたらします！