🔖

Next.js, bootstrap modal(モーダル) 起動の手順

2022/10/02に公開約1,900字

概要:

Next.js + typescriptで、bootstrap のimport 難航した為、対策メモです

  • bootstrap公式の方法で、JS modal 起動が難しいようでした

構成

  • next.js 12

関連


実装

  • modal
    id = open_buttonは、CSSで隠しておきます
ModalPost.tsx
import Link from 'next/link';
//Types
interface IProps {
  id: number,
}

/**
* IndexRow
* @param
*
* @return
*/
const ModalPost: React.FC<IProps> = function (props: any) {
  return (
    <div className="row justify-content-center"> 
      {/* button */}
      <button type="button" id="open_button" className="btn btn-primary"
       data-bs-toggle="modal" data-bs-target="#exampleModal">
        Launch demo modal
      </button>
      {/* Modal */}
      <div className="modal fade" id="exampleModal" aria-labelledby="exampleModalLabel"
	      aria-hidden="true">
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title" id="exampleModalLabel">Modal title</h5>
              <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div className="modal-body">
              ...
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close
              </button>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        #open_button { display: none ;}
      `}</style>              
    </div>
  )
}
;
export default ModalPost;

  • 呼出し

  • modal コンポーネント の、Id = open_button を指定

  • click イベントを発火

  • modal 開きます

show.tsx
  const parentShow = async function (id: number) 
  {
    try {
console.log("parentShow", id);
      const btn = document.getElementById("open_button");
      btn?.click();
    } catch (e) {
      console.log(e);
      throw new Error('error, parentFunc');
    }
  }

Discussion

ログインするとコメントできます