0 0

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();」となります。

  

  

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %