質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

8149閲覧

モーダルウィンドウの遷移

owl

総合スコア42

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/02/14 15:01

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 });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

このようにするとどうでしょうか。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 .modal { 13 display: none; 14 } 15 16 .modalBody { 17 padding: 10px; 18 box-sizing: border-box; 19 position: fixed; 20 z-index: 1000; 21 background: #fff; 22 width: 400px; 23 left: 50%; 24 top: 50%; 25 height: 400px; 26 } 27 28 .modalBK { 29 position: fixed; 30 z-index: 999; 31 height: 100%; 32 width: 100%; 33 background: #000; 34 opacity: 0.7; 35 } 36 37 .back { 38 margin: 10px; 39 } 40 41 .next { 42 margin: 10px; 43 } 44 45 .btns { 46 width: 100px; 47 height: 50px; 48 background: #ccc; 49 text-align: center; 50 margin-left: 50px; 51 margin-top: 50px; 52 float: left; 53 cursor: pointer; 54 } 55 </style> 56</head> 57<body> 58<div class="modal wd1"> 59 <div class="modalBody"> 60 <p class="close">×close</p> 61 <p class="back">戻る</p> 62 <p class="next">進む</p> 63 <p>モーダル1の内容</p> 64 </div> 65 <div class="modalBK"></div> 66</div> 67 68<div class="modal wd2"> 69 <div class="modalBody"> 70 <p class="close">×close</p> 71 <p class="back">戻る</p> 72 <p class="next">進む</p> 73 <p>モーダル2の内容</p> 74 </div> 75 <div class="modalBK"></div> 76</div> 77 78<div class="modal wd3"> 79 <div class="modalBody"> 80 <p class="close">×close</p> 81 <p class="back">戻る</p> 82 <p class="next">進む</p> 83 <p>モーダル3の内容</p> 84 </div> 85 <div class="modalBK"></div> 86</div> 87<p data-tgt="wd1" class="btns">モーダル1のボタン</p> 88<p data-tgt="wd2" class="btns">モーダル2のボタン</p> 89<p data-tgt="wd3" class="btns">モーダル3のボタン</p> 90<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 91<script> 92 $(function () { 93 $('.btns').click(function () { 94 wn = '.' + $(this).data('tgt'); 95 var mW = $(wn).find('.modalBody').innerWidth() / 2; 96 var mH = $(wn).find('.modalBody').innerHeight() / 2; 97 $(wn).find('.modalBody').css({'margin-left': -mW, 'margin-top': -mH}); 98 $(wn).fadeIn(500); 99 }); 100 $('.next').click(function () { 101 $(this).parent().parent().fadeOut(); 102 $(this).parent().parent().next().fadeIn(500); 103 }); 104 $('.back').click(function () { 105 $(this).parent().parent().fadeOut(); 106 $(this).parent().parent().prev().fadeIn(500); 107 }); 108 }); 109</script> 110</body> 111</html> 112

投稿2017/02/14 15:15

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

owl

2017/02/20 06:49

ご返信が遅れて申し訳ありません。 無事に自分が望む動きが実装できました。 本当にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問