起こったこと

HTML・CSS(Bootstrap5)・JavaScriptの学習のためサイト模写をしていたが、ボタンクリックによりモーダル画面を開く処理をJavaScriptで実装したところ、うまくmodalが開かなかった。
例えば、以下のようなコード

const modal = document.querySelector('.js-modal');
const modalButton = document.querySelector('.js-modal-button');

modalButton.addEventListener('click', () => {
      modal.classList.add('modal-open');
});

上記は、HTMLでクラス属性に"js-modal"と"js-modal-button"が設定されている要素を取得し、ボタンがクリックされた後に前者の要素のクラス属性に"modal-open"を付与するもの。
"modal-open"にはmodalを表示するためのCSSを記述していたが、これがうまくいかなかった。

原因

HTMLで読み込んでいたBootstrapのCSSファイルにmodalを装飾するコードがあり、今回自分が作成したCSSやJavascriptのコードと競合してしまったためかと思われる。

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

対策

自分で書いたmodal部分のCSSやJavaScriptのコードの"js-modal"や"js-modal-button"を"js-smodal"や"js-smodal-button"等別の名称に変更し、競合しないようにした。

const smodal = document.querySelector('.js-smodal');
const smodalButton = document.querySelector('.js-smodal-button');

smodalButton.addEventListener('click', () => {
  smodal.classList.add('smodal-open');
});

これでボタンクリック後にmodal画面が開くようになった。