https://zxcvbnmnbvcxz.com/jquery-easy-modalwindow/
上記のサイトを参考にし、モーダルウィンドウの設置まではうまく行ったのですが、モーダル内に「戻る」、「進む」ボタンを取り付け、次のモーダルに遷移する方法に苦戦しています。
イメージとしましては「進む」ボタンを押すと、現在のモーダルがフェードアウトし、次のモーダルがフェードインするという感じです。
jQueryのバージョンは1.10.2です。
ご回答よろしくお願いいたします。
https://jsfiddle.net/ululami/gqmjyx4n/
html
1 <div class="modal wd1"> 2 <div class="modalBody"> 3 <p class="close">×close</p> 4 <p class="back">戻る</p> 5 <p class="next">進む</p> 6 <p>モーダル1の内容</p> 7 </div> 8 <div class="modalBK"></div> 9 </div> 10 11 <div class="modal wd2"> 12 <div class="modalBody"> 13 <p class="close">×close</p> 14 <p class="back">戻る</p> 15 <p class="next">進む</p> 16 <p>モーダル2の内容</p> 17 </div> 18 <div class="modalBK"></div> 19 </div> 20 21 <div class="modal wd3"> 22 <div class="modalBody"> 23 <p class="close">×close</p> 24 <p class="back">戻る</p> 25 <p class="next">進む</p> 26 <p>モーダル3の内容</p> 27 </div> 28 <div class="modalBK"></div> 29 </div> 30 <p data-tgt="wd1" class="btns">モーダル1のボタン</p> 31 <p data-tgt="wd2" class="btns">モーダル2のボタン</p> 32 <p data-tgt="wd3" class="btns">モーダル3のボタン</p>
css
1*{ 2 margin: 0; 3 padding: 0; 4} 5 6.modal { 7 display:none; 8} 9 10.modalBody { 11 padding: 10px; 12 box-sizing: border-box; 13 position: fixed; 14 z-index:1000; 15 background: #fff; 16 width:400px; 17 left:50%; 18 top:50%; 19 height: 400px; 20} 21 22.modalBK { 23 position: fixed; 24 z-index:999; 25 height:100%; 26 width:100%; 27 background:#000; 28 opacity: 0.7; 29} 30 31.back{ 32 margin: 10px; 33} 34 35.next{ 36 margin: 10px; 37} 38 39.btns{ 40 width: 100px; 41 height: 50px; 42 background: #ccc; 43 text-align: center; 44 margin-left: 50px; 45 margin-top: 50px; 46 float: left; 47 cursor: pointer; 48}
javascript
1 $(function(){ 2 $('.btns').click(function(){ 3 wn = '.' + $(this).data('tgt'); 4 var mW = $(wn).find('.modalBody').innerWidth() / 2; 5 var mH = $(wn).find('.modalBody').innerHeight() / 2; 6 $(wn).find('.modalBody').css({'margin-left':-mW,'margin-top':-mH}); 7 $(wn).fadeIn(500); 8 }); 9 $('.close,.modalBK').click(function(){ 10 $(wn).fadeOut(500); 11 }); 12 });
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/20 06:49