bootstrapモダリティボックスがポップアップしたり、隠したりして、中間コンテンツのインスタンスを動的に変更します。

ファイルをインポート

<link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" >

 <link rel="stylesheet" href="style.css" rel="external nofollow" >
 <script src="jquery-1.12.4.min.js"></script>
 <script src="bootstrap.min.js"></script>

「表示」ボタンをクリックします。

 $('#modalID').click(function () {
   $('#newNotice').modal({backdrop:false})
  })

内容を変える

 $('#changeModalID').click(function () {
   $('.notice-content-center').html(data);
  })

モーダルボックスを閉じる

 $('.close-btn').click(function () {
   $('#newNotice').modal('hide')
  })

以上のbootstrapのモダリティボックスがポップアップしたり、隠したりしています。中間内容を動的に変えた例は、小編集が皆さんに共有した内容の全部です。