![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjZ74lzRjJx5ZvrDWHw1oLAEWYphKGZcGHMa4Oi4NS7JdRUuZAbHiswtXHsWnooIDkSqK3EU_kMFDV5O9ZW4zlUiuL20VJdyJAt2aoAo5iE3jrcY6T22Z_5um7InUQHDf-jZg1NshoR3KN/s1600/SnapCrab_%25E9%259D%259E%25E8%25A1%25A8%25E7%25A4%25BA%25E3%2581%25AB%25E3%2581%2597%25E3%2581%25A6%25E3%2581%258A%25E3%2581%2584%25E3%2581%259F+div+%25E8%25A6%2581%25E7%25B4%25A0%25E3%2582%2592%25E3%2583%25A2%25E3%2583%25BC%25E3%2583%2580%25E3%2583%25AB%25E3%2583%25BB%25E3%2582%25A6%25E3%2582%25A3%25E3%2583%25B3%25E3%2583%2589%25E3%2582%25A6%25E3%2580%2590%25E3%2583%2580%25E3%2582%25A4%25E3%2582%25A2%25E3%2583%25AD%25E3%2582%25B0%25E3%2583%25BB%25E3%2583%25A2%25E3%2583%25BC%25E3%2583%2589%25E3%2580%2591%25E3%2581%25AB%25E8%25A1%25A8%25E7%25A4%25BA+-+Google+Chrome_2017-3-7_9-7-45_No-00.png)
非表示にしておいた div 要素をモーダル・ウィンドウ【ダイアログ・モード】で表示する方法を紹介します。ここでは「非表示にしておいた div 要素をモーダル・ウィンドウに表示」と異なる点のみ説明します。
HTML
補足
- HTML は通常のモードと同じです。jQuery 側で表示モードを変えています。
jQuery
補足
- モーダル・ウィンドウを表示する前にクラス DIALOG を付加しています。それ以外は通常モードと同じです
CSS
補足
- クラス DIALOG が付いたモーダル・ウィンドウのコンテナのスタイルを定義しています。
- コンテナをダイアログ風の大きさにして、それがモーダル・ウィンドウの中央に表示されるようにしています。