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

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

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

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

jQuery

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

Q&A

2回答

3560閲覧

リンク先のモーダルウィンドウを開きたい

denect

総合スコア4

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2020/02/22 13:31

現在制作中の案件になりますが、リンク先のモーダルウィンドウを開けたい場合のアドバイスをお願いします。
いろいろと試してみましたが、開かないのでご教授をお願いします。

下記サイトが制作中になります。
http://hikidasu.sub.jp/E-Kreis/index.html

このサイトのお問い合わせの個人情報の取り扱いから、target="_blank"でリンク先を指定しています。

http://hikidasu.sub.jp/E-Kreis/index.html#modal05
こちらがプライバシーポリシーのページになります。

試したことは、「簡単! ページのアクセス時にモーダル(フロート)を表示する」
http://blog.idea-clippin.com/?p=129

ページ内リンク(#)でアクセスしたときに、特定のモーダルを開いたり、スライダーで特定スライドに移動する方法
http://www.lesson5.info/?p=561

を試しました。すぐ上の参考サイトはlocation.hashを使うのですが、fancyboxは使用していませんので、代わりにh他のサイトを参考にしたコード(下記)を入れたのですが、うまく動きませんでした。

// main.js jQuery(function(){ $('.table_type02 select').click(function(){ $('#sele').fadeOut(); }); }); jQuery(function(){ var winScrollTop; $('.js-modal-open').each(function(){ if ($(window).width() < 767) { $(this).on('click',function(){ //スクロール位置を取得 winScrollTop = $(window).scrollTop(); var target = $(this).data('target'); var modal = document.getElementById(target); $(modal).fadeIn(function(){ $('.sp_gnav, #main, .contact').fadeOut(); }); return false; }); $('.js-modal-close').on('click',function(){ $('.js-modal').fadeOut(function(){ $('.sp_gnav, #main, .contact').fadeIn(); }); return false; }); } else { $(this).on('click',function(){ //スクロール位置を取得 winScrollTop = $(window).scrollTop(); var target = $(this).data('target'); var modal = document.getElementById(target); $('.modal_in').scrollTop(); $(modal).fadeIn(function(){ $('.gnav, #main, .contact').fadeOut(); }); return false; }); $('.js-modal-close').on('click',function(){ $('.modal_in').scrollTop(); $('.js-modal').fadeOut(function(){ $('.gnav, #main, .contact').fadeIn(); }); return false; }); } }); }); jQuery('.policy').on('click',function(){ //ここにリンク先でのモーダルウィンドウを開けたいです。 });

何卒よろしくお願い申し上げます。

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

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

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

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

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

hwatarig

2020/02/25 14:00

すでに、http://hikidasu.sub.jp/E-Kreis/policy.html でプライバシーポリシーが表示さるようになっていますが、これは目指す状態ではないということでしょうか。 とすると、目指す状態は 「お問い合わせ」→「個人情報の取扱い」とクリックしたときに、ページ遷移せずurlはそのままで「プライバシーポリシー」のモーダルが開かれた状態(ナビゲーションの「プライバシーポリシー」をクリックしたのと同じ状態)にしたい ということでしょうか?
denect

2020/02/25 14:22

ご質問ありがとうございます。 とりあえず代替案として、プライバシーページを作りました。 ご質問された通りです。 結局、リンク先に#modal05をつけても、data idでイベントが発生しているので、無意味だということが分かりました。 作り自体を変更する必要があるのでしょうか?何か解決策があれば、ご教示をお願いします。
guest

回答2

0

jQuery

1 var hash = location.hash; 2 if (hash) { 3 var id = $(hash).prop('id'); 4 $('.modal-open[data-target]').filter(function(index, element) { 5 return $(element).attr('data-target') === id; 6 }).first().trigger('click'); 7 }

https://api.jquery.com/trigger/

投稿2020/02/26 01:33

x_x

総合スコア13749

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

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

denect

2020/02/27 01:14

ありがとうございます! 実行してみたのですが、開きませんでした。 もう少しこのコードをベースにいろいろと試してみます。
guest

0

今回の目的を達成するには「個人情報の取扱い」をクリックした際に

  1. すでに開いている問い合わせのモーダルを非表示にする
  2. プライバシーポリシーのモーダルを表示する

ができれば良さそうです。

まず2番ですが、これはすでにナビゲーションで出来ているので、それをそのまま踏襲すればよいです。.js-modal-openがついている要素をクリックしたときに、その要素のdata-targetで指定したモーダルを開く、という処理があるので、「個人情報の取扱い」のリンクにも同じようにクラスとdata-targetを指定すれば良さそうです。

次に1番ですが、二つ以上のモーダルを重ねて表示したい、という場面は無さそうなので、「個人情報の取扱い」に限定せず、モーダルを開く際の処理に「他のモーダルを閉じる」という処理を書き足してしまうのが良さそうに思います。
例えば$(modal).fadeIn(function(){
の前の行に$('.js-modal').fadeOut();を入れるなど。

投稿2020/02/25 15:38

hwatarig

総合スコア461

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

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

denect

2020/02/25 23:43

ご回答いただき、ありがとうございます。 説明不足で申し訳ございません。 個人情報の取り扱いですが、target=_'blank'で新しいウィンドウで開きたいです。 本当はpolicy.htmlを作らずにリンクを飛ばして、index.htmlが開いたらプライバシーポリシーのモーダルが開くといった動きにしたいのですが、当初の説明にあるようにアンカーの#modal05で動いているわけではなく、data-targetでイベントが発生しているので何か方法がないかと思いました。 ここのプライバシーポリシーへのリンクのみ、新しいウィンドウが開き、なおかつプライバシーポリシーのモーダルが表示されるという処理ができたらと考えております。 もし、何か解決策がございましたら、重ねてのお願いで申し訳ないですが、ご教授をお願いします。
hwatarig

2020/02/26 00:08

なるほど。それがわかるように質問文を修正ください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問