wordpressを利用したサイトを構築しております。
ここに jQuery を利用したモーダルポップアップウィンドウを実装したいと考えております。
こちらで試した方法は次のとおりです。
まずはデフォルトでwordpressデフォルトのjqueryを読み込まないコードを<head>内に記載します。
php
1<?php 2wp_deregister_script('jquery'); 3wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), '1.7.1'); 4?>
続いて leanModal というjqueryプラグイン [ jquery.leanModal.min.js ] を、header.phpと同じディレクトリに置きます。
続いて、任意の箇所に、ポップアップを表示させるための下記のコードを記載します。
※ここでは"$"記号を"jQuery"と置き換えています。
html
1<p><a href="#test" rel="leanModal">モーダル表示</a></p> 2 3<div id="test" class="modal"> 4<p>モーダル表示内容</p> 5</div> 6 7<script type="text/javascript" src="jquery-1.8.3.min.js"></script> 8<script type="text/javascript" src="jquery.leanModal.min.js"></script> 9<script type="text/javascript"> 10jQuery(function() { 11 jQuery('a[rel*=leanModal]').leanModal({ 12 overlay : 0.8 13 }); 14}); 15</script>
続いて外部CSSに、下記のコードを追加します。
css
1#lean_overlay { 2 display: none; 3 position: fixed; 4 z-index: 100; 5 top: 0px; 6 left: 0px; 7 height: 100%; 8 width: 100%; 9 background: #000; 10 11} 12 13.modal { 14 display: none; 15 width: 500px; 16 padding: 10px 20px; 17 background: #FFF; 18}
これで動作確認を行ったところ、下記のような表示となり、うまく動きません。
上記のコードのままうまく動作させる方法、または別の方法で動作させるいい方法はございませんでしょうか?
よろしくお願い致します。
※ 補足です。wordpressテーマはtwentytwelve、子テーマを適用しております。よろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/04/27 15:22