Home
このブログのスマホ用テンプレートで採用してみたモーダルウィンドウ。
スマホではメニューや検索フォームを隠して、ファーストビューをすっきりさせたかったので採用してみました。
あと、今どきっぽくてカッコ良いかと思ったので。
▼モーダルウィンドウを開くボタンを任意の場所に書く
|
1 |
<a href="#modal">メニュー</a>/code> |
▼モーダルウィンドウの中身を任意の場所に書く
|
1 2 3 4 5 6 7 8 9 10 |
<div id="modal"> <div class="modal-content"> <div class="copy"> <div class="close_link"><a href="#"><i class="fa fa-times"></i>;&nbsp;CLOSE</a></div> <?php get_search_form(); ?> <div class="modal_menu"><h3>- CATEGORY -</h3><?php wp_nav_menu( array ( 'theme_location' => 'header-navi' ) ); ?></div> </div> </div> <div class="overlay"></div> </div> |
▼CSSに以下のものを書いたら出来上がり♪
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
#modal { left: 40%; margin: -250px 0 0 -32%; opacity: 0; position: absolute; top: -50%; visibility: hidden; width: 80%; } #modal:target { opacity: 1; top: 50%; visibility: visible } #modal .copy { padding: 10px; color: #fff } .modal-content { position: relative; z-index: 20; color: #fff } #modal .copy { padding-top:100px; } #modal .overlay { background-color: #000; background: rgba(0,0,0,.85); height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 10 } .copy a{ font-family:'Oswald',sans-serif; font-weight:700; font-size:20px; text-align:center; } .copy .close_link a { color: #fff; text-decoration: none; display: inline-block; padding:10px; border-radius: 5px; background-color: #E74C3C; width:100%; } .copy .modal_menu{ margin-top: 40px; display: inline-block; width: 100%; } .copy h3{ font-family:'Oswald',sans-serif; font-weight:700; font-size:28px; color:#E74C3C; text-align:center; margin-bottom:15px;} .copy .modal_menu a{ color:#fff; float:left; width:50%; margin:10px 0; font-size:24px; } #modal #s { padding: 4%; width: 96%; } |
参考サイト：Minimal Pure CSS Responsive Modal Box – modalcss
http://www.cssscript.com/minimal-pure-css-responsive-modal-box-modalcss/
http://www.cssscript.com/minimal-pure-css-responsive-modal-box-modalcss/
