クリックしてモーダルウィンドウを開くCSS
こちらからコピーしてテストしてみました。⇒Black Flag
サンプル↓
HTML
<div id="modal"> <div id="open01"> <div class="modal_window"> <h2>MODAL WINDOW【01】</h2> <p>JQueryを使わないCSS(CSS3)だけで LightBox風のモーダルウィンドウを表示する。</p> <p>クリックすることでモーダルウィンドウが表示されます<br /> が・・・なんかうまく行かない。<br /> WP の場合、テーマがCSSをいろいろいじってるのでどこかでぶつかるんだろう。 WPでやる場合には、プラグインを探した方がよさそうだね。 </p> <p>モーダルウィンドウを閉じる際は、ウィンドウ外をクリックするか、 下記の様に配置して閉じるボタンをクリック。</p> <a href="#">【×】CLOSE</a> </div><!--/.modal_window--> <a href="#" class="close_overlay">×</a> </div><!--/#open01--> </div>
CSS
<style> /* ContentsArea -------------------------- */ #open01, #open02 { top: 0; left: 0; width: 100%; height: 100%; display: none; position: absolute; } .close_overlay { top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px; position: absolute; background: #000; opacity: 0.5; z-index: 5; } .modal_window { top: 50%; left: 50%; margin: -150px 0 0 -200px; width: 400px; text-align: center; display: block; background: #ffc; position: absolute; z-index: 10; } .modal_window h2 { /* margin-bottom: 20px;*/ width: 400px; /* height: 30px; line-height: 30px; */ color: #fff; font-size: 14px; font-weight: bold; text-align: left; text-indent: 15px; background: #000; } .modal_window p { padding: 0 15px 15px 15px; font-size: 12px; line-height: 160%; text-align: left; } /* CSS3 ModalWindow SET -------------------------- */ @-webkit-keyframes modalFadeIn { 0% {opacity:0;display:block;} 100% {opacity:1;} } div#modal div:target { -webkit-animation-name: modalFadeIn; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; opacity: 1; display:block; } </style>