シンプルなモーダルポップアップを作成する

Question

私は非常に単純な要件を持っています。私は2つのdivがあります。 Div1にはリンクがあり、Div2にはテキストが含まれています。

Div1のリンクをクリックすると、灰色の背景と閉じるボタンを持つ単純なモーダルポップアップとしてDiv2を表示したいと考えています。

外部プラグインを使用せずにこれを行うことができます。

もしそうでなければ、jqueryuiのプラグインをチェックしました。しかし、私は何を取るべきか、何を残すべきか分からない、非常に多くのjqueryとcssファイルがこの例で参照されています。

Answer 1

プラグインなしでも確実に可能ですが、それは重大な配管となる可能性があります。
純粋なjavascriptで「自家製」モーダルウィンドウの実装を使用しました。
私を信頼してください - それは良い考えではありません。 jQueryでさえ（jQuery UIと混同しないでください）。

Eric Martin（彼はStackOverflowにもあります。少なくとも、彼の製品に関連するすべての質問に答えようとしています）の'SimpleModal' pluginをお勧めします。
私はAPIが好きで、魅力的に機能します。

Answer 2

Here's a tutorialこのようにする方法については、

Answer 3

いいえ、jQueryにはモーダルウィンドウ機能が組み込まれていません。あなたは自分のモーダルウィンドウをロールするためにjQueryを使うことができますが、その場合はおそらくこの質問をしていません。ちょうど第三者のプラグインを入手してください。

Answer 4

プラグインなしでも実行できますが、おそらく避けたくない難しい部分はモジュール性です。

クリックしてドラッグしたときにダイアログボックスを移動させたい場合は、マウスの位置に基づいてそのdivの位置を設定する必要があります。したがって、jqueryuiオプション。

私は同意すると、CSSはあなたが時々チョークするのに十分です。

ああ、ちょうどあなたが任意のブラウザのUIに合わせてモーフィングますボタン一つで完璧なグレーのボックスを取得することができ、言われていますので：alert()

Answer 5

まず、SimpleModal勧告@Arnis L.に感謝

第2に、非常に多くのモーダル/ライトボックスプラグインが存在する理由があります。ブラウザ間で互換性のあるものを作成するには、多くの要素を考慮する必要があります。したがって、外部のプラグインを使用せずにやりたいことをすることは可能ですが、それを正しく行うには、多くのコードを取ることになります。あなたが始めるために例のいずれかをダウンロードすることができ

）;

だから、あなたは、単純なモーダル... SimpleModalを試していない理由を作成するために助けを求めました。 SimpleModal .jsファイルをページに追加し、いくつかのスタイルを追加するだけで、準備が整います。私はここにこのプラグインを使用するにはどうすればよい

http://www.ericmmartin.com/projects/simplemodal-demos/