javascript - JavaScript を使用してモーダル ポップアップを作成するには?

Question

JavaScript と CSS を使用して灰色の背景を持つモーダル ポップアップ ウィンドウを作成するには?

誰かが私に例を示すことができますか?

Answer 1

私はjQueryをお勧めします...

http://jqueryui.com/demos/dialog/

Answer 2

JQueryダイアログの作成を検討できます。これにより、あなたが探しているモダリティが得られると思います。実際のポップアップウィンドウがあなたが望む解決策だとは思いません。

Answer 3

こんにちは、この目的のために 2 つの div を使用できます。最初の div にはすべてのメイン ページのコンテンツが含まれ、2 番目の div にはコンテンツを無効にするためのものがあります。イベントを発生させると、2 番目の div がすべての UI を塗りつぶし、最初の div の上に表示されます。最初の div にコンボ ボックスがある場合は、それを無効にするか非表示にする必要があります。そうしないと、最初の div から飛び出してしまいます。

Answer 4

私の JS ライブラリ http://www.cristianizzo.com/DEV/Qpass/index.php?r=JS&v=modalを使用できます

ここに例

<!-- Button trigger modal --> 
<a href="#" modal="Modal" modal-Id="modalDialog">Modal Standard</a>  

<!-- Modal --> 
<div id="modalDialog" class="modal_hidden"> //content </div>

コールバック関数を渡すか、他のコンテンツをプッシュするモーダルを拡張できます

<!-- Button trigger modal --> 
<a href="#" modal="Modal" modal-Id="modalFunction" modal-Size="small" modal-Fn="fnTest">Modal Fn</a>  

<!-- Modal --> 
<div id="modalFunction" class="modal_hidden"> 
//Content 
<a href="#" onclick="Modal.extendModal('idDiv', fnName); return false;"></a>
</div>  

<!-- Second Modal --> 
<div id="idDiv" class="modal_hidden"> 
//Content 
</div>

<!-- JS --> 
function fnTest(){ 
alert('execute new function'); 
}

<!-- JS --> 
function fnName(){ 
alert('execute new function'); 
}

Answer 5

これは「ライトボックス」と呼ばれ、これまでに何十回も議論されてきました。