animatedModal.jsでページ内アンカーの際、スクロールと共に、モーダルウィンドウを消したい

animatedModal.jsを用いて、ページ内アンカーを正常に作動させたいのですが、Scriptに疎いので、解決策を求めます。

仕様：
レスポンシブサイトで、ヘッダは44px最上部固定
PCでのみ横並びのナビ、スマホ・タブレットでは、
ハンバーガーボタンクリックで、先の、animatedModal.jsでモーダルウィンドウを開きます。
で、別ページなら問題ないと思いますが、ブログ・facebook以外は、
同一ページ内でアンカー移動なんです。
また、スムーススクロールはヘッダ分のサイズが指定でき、
animatedModal.jsでリンク先が「#」であっても動作しないよう出来る。
コリスさん配布のjquery.page-scroller-309.jsを用いています。

現状：
モーダルウィンドウを開くところまでは正常。
モーダルウィンドウ内のリンクをクリックすると、

モーダルウィンドウがそのまま
バックグラウンドではスクロールしているが、-44pxは効いていない。
その際、確かアドレスは変わらないはずなのが、「index.html#hoge」のようになる

希望：
モーダルウィンドウ内のアンカーリンクをクリックしたら、
モーダルウィンドウを消したい。
スムーススクロール中にモーダルが消えるのがベスト。
現状、スムーススクロールも効かなくなっているので、正常にしたい。
(先のアドレスが…もそうですが、他の場所にあるアンカーもScriptが効いているとは思えない動きをしています)

以上になります。
すごく大変な場合、その旨だけでもOKです。
対応できない場合、他のScriptで代用＆提案します…
それではよろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

animatedModal.jsのソースを見てみましたが、closeボタンをクリックする以外にcloseさせる方法等は用意されていないようでしたが、open,closeにはそれぞれbefore,afterのタイミングでcallbackが用意されていました。
そこで

javascript
1$('モーダルウィンドウ内のリンクを指定').click(functioon(){
2  $('モーダルウィンドウのcloseボタンを指定').trigger('click');
3});

とすることで「モーダルウィンドウのリンク」をクリックした際に「モーダルウィンドウのcloseボタン」に対してclickイベントを発生させてみてはどうでしょうか。
(この設定自体は後述のafterOpenで設定する必要があると思います。)

jquery.page-scroller-309.js動作しない件に関しては推測になりますが、これは読み込むだけで動作するように設計されていると思うのですが、読み込んだ際(厳密には少し違いますが)にページ内リンクに対してclickイベントを設定しているのだと思います。

ところがモーダルウィンドウ内のページ内リンクはこのの設定が終わった後に追加されるため対象外となってしまうのだと思います。

javascript
1$("#demo01").animatedModal({
2  //その他設定
3  afterOpen:functioon(){
4    //モーダルウィンドウ内のスムーズスクロールを設定
5    //この部分はモーダルウィンドウが開いた後に実行されます
6  }
7});