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

bootstrap4のTooltipsをカスタマイズ。
https://getbootstrap.com/docs/4.3/components/tooltips/
JavaScriptでtemplate設定

Options
https://getbootstrap.com/docs/4.3/components/tooltips/#options
データ属性の場合はdata-のようにオプション名を追加。例「data-animation=”” 」

$(function () {
  $('[data-toggle="tooltip custom-tooltip"]').tooltip({
    template: '<div class="tooltip custom" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
    title: 'ツールチップの色変更'
  });
})

<a href="#" class="btn btn-outline-warning" data-toggle="tooltip custom-tooltip">ツールチップのカスタマイズ</a>

.custom {
  &.bs-tooltip-top .arrow::before,
  &.bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: $white;
  }
  .tooltip-inner {
    background-color: $white;
    color: $gray-700;
  }
}

※scss、変数指定

bootstrapの「Progress」を五つ星（★★★★★）five star reviewにする。
https://getbootstrap.com/docs/4.3/components/progress/

★はsvg（background）にて表示
bootstrap4.3使用前提

HTML

<div class="progress fivestar">
  <div class="progress-bar progress-bar-star" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

SCSS

// function
@function url-encode($string) {
  $map: (
    "%": "%25",
    "<": "%3C",
    ">": "%3E",
    " ": "%20",
    "!": "%21",
    "*": "%2A",
    "'": "%27",
    '"': "%22",
    "(": "%28",
    ")": "%29",
    ";": "%3B",
    ":": "%3A",
    "@": "%40",
    "&": "%26",
    "=": "%3D",
    "+": "%2B",
    "$": "%24",
    ",": "%2C",
    "/": "%2F",
    "?": "%3F",
    "#": "%23",
    "[": "%5B",
    "]": "%5D"
  );
  $new: $string;
  @each $search, $replace in $map {
    $new: str-replace($new, $search, $replace);
  }
  @return $new;
}
@function bg-svg($string) {
  @return url('data:image/svg+xml;charset=utf8,#{url-encode($string)}');
}
// variable
$amber: #FFC107;
$gray-400: #BDBDBD;
// style
.progress.fivestar {
  background-image: bg-svg('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><polygon fill="' + $gray-400 + '" points="7.33 4.68 11.5 4.68 11.5 4.73 8.13 7.28 9.45 11.49 9.42 11.5 6 8.91 2.58 11.5 2.55 11.49 3.87 7.28 0.5 4.73 0.5 4.68 4.67 4.68 5.98 0.5 6.02 0.5 7.33 4.68"/></svg>');
  height: 1.2rem;
  width: 6rem;
  .progress-bar.progress-bar-star {
    background-image: bg-svg('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><polygon fill="' + $amber + '" points="7.33 4.68 11.5 4.68 11.5 4.73 8.13 7.28 9.45 11.49 9.42 11.5 6 8.91 2.58 11.5 2.55 11.49 3.87 7.28 0.5 4.73 0.5 4.68 4.67 4.68 5.98 0.5 6.02 0.5 7.33 4.68"/></svg>');
  }
}
.progress.fivestar,
.progress-bar.progress-bar-star {
  background-color: transparent;
  background-size: 1.2rem;
  background-repeat: repeat-x;
  border-radius: 0;
}