1クリックでモーダルを開いてからモーダルウインドウ内でアンカーリンク移動までしたい

サイト上のリンク <a href="#xxxx">aaa</a>
をクリックするとモーダルが開いて、モーダル内の該当のアンカーまで移動した状態を表示させたいのですが、流れはわかってても　jsで書いてみてもうまく動きません。

だれかサンプルとしていただけないでしょうか？
よろしくお願いいたします。

No.3 回答者： fujillin 回答日時： 2015/09/18 09:43

ANo1、2です。

＞モーダルというのが別ウィンドウではなくて、下記のようにソースが書かれています
あらら・・・
いわゆる「モーダルウィンドウ」ではないのですね。
まるっきりの勘違い・・・というかわかりにくいご質問。


＞ここが動きが近いです。
その参考サイトに作成方法が丁寧に書いてありますが、ここの限られた回答欄に私が書くよりもよほど情報量が多いはずと思います。

＞localhashではうまく動きませんでした。。。
ページ内のコンテンツなので、別ウィンドウの時とは考え方がまるきり違います。
クリックによってその内容の表示/非表示を制御したり、重ねて表示するために位置の調整などが必要になります。
（詳しくは、ご提示の参考サイトをご覧になれば解説してあると思います）


スクリプト等を自作するのが面倒だというのであれば、lightbox風のライブラリは数多く作成されていますので、気に入ったものをご利用なさるのが簡単かと思います。
大抵のものがinlineコンテンツや外部ファイルの読込にも対応していると思います。
例えば
　https://github.com/mjackson/shadowbox
　http://fancyapps.com/fancybox/

No.2 回答者： fujillin 回答日時： 2015/09/17 17:16

ANo1です。

別ウィンドウを開くので、リンク要素でないと勝手に思い込んでいましたが、対象がリンク要素なのですね。
失礼しました。


＞モーダルを開いたときにすでにアンカーに飛んだ状態にするのが、どうすればいいかわかりません。
普通に、URIにハッシュを設定して
　<a href="hogehoge.htme#target">ほげほげ</a>
とすれば、hogehoge.htmlに遷移して、targetが表示されるようになりますよね？
モーダルで呼び出す場合でもURIの意味合いは同じなので、表示先のHTML内にアンカーを設定しておいてください。

＞呼び出し元側のウィンドウでアンカー要素をクリックすると、スクリプト実行後に通常のアンカーをクリックした動作をしますので、それを中止したい場合は、
　return false;
などを行う必要があります。スクリプト内から行う場合は
　preventDefault()
などを実行する必要があります。
https://developer.mozilla.org/ja/docs/Web/API/Ev …


＞教えていただいた記述ですと下記のように書けばよろしいのでしょうか？
参考サイトの説明にあるように、elementはクリック対象となる要素、targetは表示先ドキュメント内のアンカー、argumentsは表示先に渡すする引数ですが・・・

わからない場合は
<a href="#" onclick="showModalDialog("hogehoge.html#target", null); return false;">aaa</a>
とかでいけませんか？
（ＵＲＩは状況に合わせた内容に変えてください）

通常はモーダルウィンドウからの入力値などを受け取ると思いますので、上記のような処理ではすまないとは思いますが、その後何をなさりたいのかわからないので、とりあえずご質問の内容に沿った部分だけです。

この回答へのお礼

ありがとうございます。

モーダルというのが別ウィンドウではなくて、下記のようにソースが書かれています。


<a href="#hogehoge">xxxxx</a>

<div id="hogehoge">
<!--モーダル内の中-->
<a href="#hoge01">アンカーリンク</a>
<div id="hoge01">
表示内容
</div>
</div>


https://syncer.jp/jquery-modal-window
ここが動きが近いです。
lightbox系のモーダルです。


xxxx　をクリックして　表示内容　の箇所に飛んだ状態にしたいのですが、
localhashではうまく動きませんでした。。。

お礼日時：2015/09/17 17:37

No.1 回答者： fujillin 回答日時： 2015/09/17 15:59

スクロールしなければいけないようなダイアログのレイアウトや仕様に疑問を感じますが・・・

とりあえず、そのまま素直に記述すればいけるのでは？
element.onclick = function(){
　showModalDialog("hogehoge.html#target", arguments);
}

＜参考＞
https://developer.mozilla.org/ja/docs/Web/API/Wi …

この回答へのお礼

ありがとうございます
１つ引っかかっているのが、

モーダルを開くフックとして　#(ハッシュ)をaタグに使っています。

モーダル内のアンカーリンクも#を使っているため、モーダルを開いたときにすでにアンカーに飛んだ状態にするのが、どうすればいいかわかりません。

教えていただいた記述ですと下記のように書けばよろしいのでしょうか？
初心者ですいません、、よろしくお願いいたします。

<script>
element.onclick = function(){
　showModalDialog("#target", arguments);
}
</script>
<a href="element">aaa</a>

お礼日時：2015/09/17 16:22