<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>
<div class="popupModal1"> <input type="radio" name="modalPop" id="pop11" /> <label for="pop11">クリックでポップアップ</label> <input type="radio" name="modalPop" id="pop12" /> <label for="pop12">CLOSE</label> <input type="radio" name="modalPop" id="pop13" /> <label for="pop13">×</label> <div class="modalPopup2"> <div class="modalPopup3"> <h2 class="modalTitle">CSSだけのポップアップモーダル</h2> <div class="modalMain"> <p
通常「モーダル・ポップアップ」はjQueryを利用して実装するケースが多いかと思いますが、今回紹介する［Pure CSS Modal Popup］は、その名のとおりスタイルシートの設定だけで実装できる便利なテクニックです。 まずは下記URLよりサンプルをご覧ください。 Pure CSS Modal Popup：実装サンプル HTMLの記述 実際にサンプルサイトで使っているHTMLコードです。 <div class="modal"> <input id="modal-trigger" type="checkbox"> <label for="modal-trigger">Launch Modal</label> <div class="modal-overlay"> <div class="modal-wrap"> <label for="modal-trigger">✖</label> <
特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
