bootstrap

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

チェックボックスがchecked（true）の時、または
チェックされていない（false）時に
●●したい、というやつです。

これは結構よく使う。

$(function() {
  $('[name="inputname"]:checkbox').change( function() {
    if ($(this).is(':checked')) {
      $(this).prop('checked', true).attr('checked', 'checked');
      $('body').addClass('backdrop-open');
    } else {
      $(this).prop('checked', false).removeAttr('checked');
      $('body').removeClass('backdrop-open');
    }
  });
});

個人的にですけど、画像の拡大表示によく使う「lightbox」。
個人的にとは言いましたが、お仕事上でも「画像の拡大表示」にはよく使います。

もともと画像を配置していたけど、拡大表示にはしていなかった箇所。
やっぱり拡大表示させたいな！ということで
なるべくhtml弄らずに改修（jQueryでタグ入れちゃおう！）することにした😊

jQueryにて a タグ追加、hrefにsrcの値を挿入＆lightboxの属性追加。

<script>
$(function(){
    $(".my-image img").each(function(){
      var src = $(this).prop('src');
      $(this).wrap($('<a>').prop('href', src).attr('data-lightbox', 'dataImage'));
    });
});
</script>