The Acorn Spirit's Journey

bootstrap5 のモーダル内にページ内リンクがあり、そのリンクをクリックしたらモーダルを閉じたい。

　

Bootstrap5 Modal

https://getbootstrap.com/docs/5.1/components/modal/

　

ページ内リンクはスムーススクロール、かつ、モーダルを閉じる。という感じ。

　

モーダルのHTML

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <ul>
        <li><a href="#contents1">コンテンツ1</a></li>
        <li><a href="#contents2">コンテンツ2</a></li>
        <li><a href="#contents3">コンテンツ3</a></li>
        <li><a href="#contents4">コンテンツ4</a></li>
        <li><a href="#contents5">コンテンツ5</a></li>
      </ul>
    </div>
  </div>
</div>

　

bootstrap5 モーダルのJavascript

Modal getOrCreateInstance

https://getbootstrap.com/docs/5.1/components/modal/#getorcreateinstance

Modal hide

https://getbootstrap.com/docs/5.1/components/modal/#hide

　

var myModalEl = document.getElementById('exampleModal');
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl);

modal.hide();

　

スムーススクロール

https://www.fenet.jp/dotnet/column/language/javascript/7491/#JavaScript

↑JavaScriptでのスムーススクロールの実装方法↑

《例》上記サイトのようなJavascriptのみのスムーススクロールを使用する場合

～省略～
// window.scrollToでスクロール
window.scrollTo({
  top: position,
  behavior: 'smooth',
});
// この位置にModal hideを追加（スクロールが実行されたらモーダルを閉じます）
modal.hide();
～省略～

実行順としては、スムーススクロール実行後に「modal.hide();」となります。