animatedModal.jsで開いたモーダルからページ内リンクをするとモーダルが残る
Q&A
Closed
解決したいこと
モーダルウィンドウの中にあるページ内リンクをクリックすると、モーダルウィンドウが開いたままになるので、モーダルを閉じた上で移動したいです。（移動自体はしている様子）
発生している問題
animatedModal.jsを使用してモーダルウィンドウにメニューを表示して、ページ内リンクをしています。例えばaタグで「/service/」から「/service/#sec_gas」へリンクする際にモーダルウィンドウが表示されたままになります。
裏側で移動はしているようで、手動でモーダルを閉じると正しいリンク先が表示されます。
別のページから別のページの該当箇所に移動する場合は、別のページに移動しているの問題は発生しません。
（「/recruit/#Flesh」から「/about/#sec_history」 への移動等は大丈夫）
やりたいことは
１．ページ内リンクをクリックしたら、自動でモーダルを閉じる
２．モーダルを閉じた後にaタグで指定されている箇所に移動する
JSには疎いので是非解決して頂きたいです。
該当するソースコード
▼以下は使用しているanimatedModal.jsです
!function (l) { l.fn.animatedModal = function (a) { var n = l(this), o = l.extend({ modalTarget: n.attr("href").replace("#", ""), position: "fixed", width: "100%", height: "100%", top: "0px", left: "0px", zIndexIn: "9999", zIndexOut: "-9999", color: "#39BEB9", opacityIn: "1", opacityOut: "0", animatedIn: "zoomIn", animatedOut: "zoomOut", animationDuration: ".6s", overflow: "auto", beforeOpen: function () { }, afterOpen: function () { }, beforeClose: function () { }, afterClose: function () { } }, a), t = l(".close-" + o.modalTarget), i = l(n).attr("href"), e = l("body").find("#" + o.modalTarget), d = "#" + e.attr("id"); e.addClass("animated"), e.addClass(o.modalTarget + "-off"); var r = { position: o.position, width: o.width, height: o.height, top: o.top, left: o.left, "background-color": o.color, "overflow-y": o.overflow, "z-index": o.zIndexOut, opacity: o.opacityOut, "-webkit-animation-duration": o.animationDuration, "-moz-animation-duration": o.animationDuration, "-ms-animation-duration": o.animationDuration, "animation-duration": o.animationDuration }; function s() { e.css({ "z-index": o.zIndexOut }), o.afterClose() } function m() { o.afterOpen() } e.css(r), n.click(function (a) { a.preventDefault(), l("body, html").css({ overflow: "hidden" }), i == d && (e.hasClass(o.modalTarget + "-off") && (e.removeClass(o.animatedOut), e.removeClass(o.modalTarget + "-off"), e.addClass(o.modalTarget + "-on")), e.hasClass(o.modalTarget + "-on") && (o.beforeOpen(), e.css({ opacity: o.opacityIn, "z-index": o.zIndexIn }), e.addClass(o.animatedIn), e.one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", m))) }), t.click(function (a) { a.preventDefault(), l("body, html").css({ overflow: "auto" }), o.beforeClose(), e.hasClass(o.modalTarget + "-on") && (e.removeClass(o.modalTarget + "-on"), e.addClass(o.modalTarget + "-off")), e.hasClass(o.modalTarget + "-off") && (e.removeClass(o.animatedIn), e.addClass(o.animatedOut), e.one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", s)) }) } }(jQuery);
▼以下はanimatedModal.jsのオプション設定用ファイルです
//modalメニュー用
$(function(){
$("#open-modalMenuBody").animatedModal({
//開く要素のID名
modalTarget:'modalMenuBody',
//開くときと閉じるときのアニメーション
animatedIn: 'fadeInDown',
animatedOut: 'fadeOutUp',
//アニメーションにかかる秒数
animationDuration: '.5s',
//その他
color: 'none',
});
});
▼以下は開いた状態のモーダルウィンドウです
<section id="modalMenuBody">
<header id="header_menu_mb">
<nav id="header_menu_mb_inner">
<div class="navBtn"><!-- 右に残るボタン -->
<div class="modalBtn close"><!-- モーダルメニュー閉じる -->
<span href="#modalBody" class="close-modalMenuBody"><img src="<?php echo get_template_directory_uri(); ?>/image/modalMenu_close.svg"></span>
</div>
<div class="recruitBtn"><!-- リクルートのボタン -->
<a href="<?php echo $menuList_recruit_url; ?>">
<?php echo $menuList_recruit_slug; ?>
</a>
</div>
</div>
</nav>
<nav class="headerNav">
<?php include (TEMPLATEPATH . '/parts/_common/menu_accordion.php'); // ヘッダーメニュー ?>
<div class="btnArea">
<a class="btn linkBtn green w-100" href="tel:0000-00-0000">TEL 0000-00-0000</a><br>
<a class="btn linkBtn green w-100" href="xxxxx">お問い合わせ</a>
</div>
</nav>
</header>
</section>
▼以下はmenu_accordion.phpです。
<div class="menu_accordion">
<div class="navGroup">
<!-- navItem お知らせ -->
<div class="navItem cat_news">
<a class="layer2_xl" href="/news/">お知らせ</a>
<a class="layer2 cat_news" href="/news/">お知らせ</a>
</div>
<!-- /navItem お知らせ -->
<!-- navItem 業務内容 -->
<div class="navItem cat_service">
<a class="layer2_xl" href="/service/">業務内容</a>
<span class="layer2 cat_service">業務内容</span>
<ul class="layer3">
<li class="d-flex d-lg-none"><a href="/service/" >業務内容</a></li>
<li><a href="/service/#sec_gas">ガス</a></li>
<li><a href="/service/#sec_air">空調</a></li>
</ul>
</div>
<!-- /navItem 業務内容 -->
</div>
<div class="navGroup cat_about">
<!-- navItem 会社概要 -->
<div class="navItem">
<a class="layer2_xl" href="/about/">会社概要</a>
<span class="layer2 cat_about">会社概要</span>
<ul class="layer3">
<li class="d-flex d-lg-none"><a href="/about/" >会社概要</a></li>
<li><a href="/about/#sec_message">メッセージ</a></li>
<li><a href="/about/#sec_history">年表</a></li>
</ul>
</div>
<!-- /navItem 会社概要 -->
<!-- navItem 採用情報 -->
<div class="navItem cat_recruit">
<a class="layer2_xl" href="/recruit/">採用情報</a>
<span class="layer2 cat_recruit">採用情報</span>
<ul class="layer3">
<li class="d-flex d-lg-none"><a href="/recruit/">採用情報</a></li>
<li><a href="/recruit/#Flesh">新卒</a></li>
<li><a href="/recruit/message/">先輩の言葉</a></li>
</ul>
</div>
<!-- /navItem 採用情報 -->
</div>
補足事項
a.layer2_xlはモーダルウィンドウでは非表示（display: none;）にしている項目になります。
span.layer2はアコーディオンメニューを開くためのボタンで、別のページに移動はしません。
ul.layer3直下のliにあるaタグのページ内リンクの箇所が問題発生箇所です。
menu_accordion.phpはフッターメニューでも同じコードを使いまわしているため、出来れば弄りたくはないです。
他に必要な情報があれば教えてください。
よろしくお願いします。
0
