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

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

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

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

Q&A

解決済

1回答

5826閲覧

swiper.jsで作成したスライド内で、モーダルウィンドウを表示したい

isobel

総合スコア18

jQuery

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

0グッド

0クリップ

投稿2017/06/25 04:01

swiper.jsを利用して、スライダーを作成しています。
各スライダー内に、以下のjqueryを用いてモーダルウィンドウを設置しようとしたのですが、うまく表示されませんでした。

【モーダルウィンドウ作成時に参考にさせて頂いたサイト】
http://coolwebwindow.com/jquery-lab/archives/304

<script> $(function(){ // 「.modal-open」をクリック $('.modal-open').click(function(){ // オーバーレイ用の要素を追加 $('body').append('<div class="modal-overlay"></div>'); // オーバーレイをフェードイン $('.modal-overlay').fadeIn('slow'); // モーダルコンテンツのIDを取得 var modal = '#' + $(this).attr('data-target'); // モーダルコンテンツの表示位置を設定 modalResize(); // モーダルコンテンツフェードイン $(modal).fadeIn('slow'); // 「.modal-overlay」あるいは「.modal-close」をクリック $('.modal-overlay, .modal-close').off().click(function(){ // モーダルコンテンツとオーバーレイをフェードアウト $(modal).fadeOut('slow'); $('.modal-overlay').fadeOut('slow',function(){ // オーバーレイを削除 $('.modal-overlay').remove(); }); }); // リサイズしたら表示位置を再取得 $(window).on('resize', function(){ modalResize(); }); // モーダルコンテンツの表示位置を設定する関数 function modalResize(){ // ウィンドウの横幅、高さを取得 var w = $(window).width(); var h = $(window).height(); // モーダルコンテンツの表示位置を取得 var x = (w - $(modal).outerWidth(true)) / 2; var y = (h - $(modal).outerHeight(true)) / 2; // モーダルコンテンツの表示位置を設定 $(modal).css({'left': x + 'px','top': y + 'px'}); } }); }); </script>

スライダーの外に出すと、モーダルは問題なく表示されます。
スライダー内にモーダルを設置するにはどうすればいいのでしょうか…。

jqueryをほぼ理解しないまま、コピペだけで対応している初心者です。
どなたかご教授頂けますと幸いです。
宜しくお願い致します。

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

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

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

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

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

guest

回答1

0

ベストアンサー

スライダー内にモーダルというのがどういう状態なのかわかりませんでした。
Swiperによるコンテンツ内からモーダルウインドウを呼び出すのは問題なくできました。

最近の質問にこのようなものがありましたが参考になるでしょうか?
https://teratail.com/questions/80732

投稿2017/06/26 01:49

x_x

総合スコア13749

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

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

isobel

2017/06/26 03:12

質問がわかりにくくて申し訳ありません。 http://calendar-life.site/ 上記のようなサイトで、各月のカレンダーの下にある「PRINT OUT」「DOWNLOAD」ボタンをクリックすると、モーダルウィンドウが開くようにしたいのです。 記載したjqueryは、スライダーコンテンツ外では動作するものの、 スライダー内にある「PRINT OUT」「DOWNLOAD」ボタンをクリックした際モーダルを表示させようとするとうまくいきませんでした。 jqueryが干渉しているのかとは思うのですが…。
x_x

2017/06/26 04:08

参考にしたところのリンク先(さらに先)にもありますが問題は重なりです。モーダルダイアログの内容はbody直下に書くようにしてください(呼び出しは変えなくていいです)。現状のHTMLから変えられない場合は jQuery UI のDialogを使ったほうがいいかもしれません。
isobel

2017/06/26 09:52

モーダルダイアログの内容をbody直下に記述したところ、解決しました! 本当にありがとうございました。 HTMLの構造上は少し不自然になるので、 jQuery UI のDialogも試してみたいと思います。 助かりました、ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問