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

Question

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

下記サイトが制作中になります。
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(){
	//ここにリンク先でのモーダルウィンドウを開けたいです。
});

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

Comments

[hwatarig]

すでに、http://hikidasu.sub.jp/E-Kreis/policy.html でプライバシーポリシーが表示さるようになっていますが、これは目指す状態ではないということでしょうか。

とすると、目指す状態は
「お問い合わせ」→「個人情報の取扱い」とクリックしたときに、ページ遷移せずurlはそのままで「プライバシーポリシー」のモーダルが開かれた状態（ナビゲーションの「プライバシーポリシー」をクリックしたのと同じ状態）にしたい
ということでしょうか？

[denect]

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

Answer 1

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

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

Comments

[denect]

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

Answer 2

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

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

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

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

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

Comments

[denect]

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

[hwatarig]

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