Result
jQuery
//モーダルウィンドウで表示するボックスを隠しておく$("#fade").hide();$(".show_hide").show();//クリックイベントでトグル出来るようにする$('.show_hide').click(function nos() { $("#fade").fadeToggle("fast");}); |
css
.wrap{margin: 25px;}#fade { height:100%; width:100%; background-color: rgba(0, 0, 0, 0.7); padding:0; margin:0; border:0; position:absolute; overflow:hidden; left:0px; top:0px; display:block;}.cont{ margin:10% auto 0 auto; width:300px; height:300px; background-color: #FFF; -moz-box-shadow: 0 0 100px 1px #444; -webkit-box-shadow: 0 0 100px 1px #444; font-size:20px;} |
html
<div class="wrap"><a href="javascript:void(0);" class="show_hide">Show/hide</a><p> Lorem ipsum ... </p><div id="fade"> <div class="cont"> Show Window! XD <br> <a href="#" class="show_hide">hide</a></div></div> </div> |
