【ワテの備忘録】ASP.NET MVCでBootstrapのモーダルダイアログを使う

ASP.NET MVCではBootstrapがデフォルトで組み込まれているので、何かと便利だ。

例えばボタンの見栄えに関しては、以下の種類がある。

ボタンのサイズも、四種類が用意されている。

btn-lg
通常サイズ
btn-sm
btn-xs

上記のボタンにこれらのサイズ指定を行う場合には、以下のように書けばよい。

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>

つまり、classでボタンの種類やサイズを指定しておけば良いのだ。

当記事では、Bootstrap Modalダイアログの使い方を紹介したい。

Bootstrap Modalダイアログ
1. Cocoonテーマに変更したらBootstrapダイアログが開かなくなった原因と対策
Bootstrapモードレスダイアログは無いのか？
ワテ自作のASP.NET MVCサイトの紹介
まとめ

Bootstrap Modalダイアログ

モーダルダイアログは、そのダイアログの質問に答えない限り、他のウインドウ操作が出来ないタイプのダイアログだ。

ワテはこれが嫌いだ。

もう一つのダイアログに、モードレスダイアログがある。

モードレスダイアログの場合には、そのダイアログが開いていても、他のウインドウ操作が可能だ。ワテはこっちが好き。

さて、Bootstrap にも便利なダイアログが標準で用意されている。

そのサンプルプログラム。

よく見かけるサンプルなので、たぶんBootstrap の公式のサンプルなのかな？

このサンプルはネットで見付けたやつだが、どこで見付けたサンプルなのか忘れた。でもよく見かける。

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Bootstrap Example</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
 <h2>Large Modal</h2>
 <!-- Trigger the modal with a button -->
 <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Large Modal</button>

 <!-- Modal -->
 <div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog modal-lg">
   <div class="modal-content">
    <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal">&times;</button>
     <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
     <p>This is a large modal.</p>
    </div>
    <div class="modal-footer">
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
   </div>
  </div>
 </div>

</div>

</body>
</html>

使い方であるが、上のコードで

<div class="modal fade" id="myModal" role="dialog">
・・・
</div>

この部分を自分のHTMLのどこでも良いからコピペして貼っておけば良い。

もちろん冒頭の Bootstrap関連のCSS ファイルなどは読み込んでいる必要がある。

一方、

 <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Large Modal</button>

によってボタンが一個表示される（下図）。

このボタンをクリックするとBootstrapモーダルダイアログが開く。

注意：現在、↑のボタンをクリックしても~~ダイアログが開かなくなってしまった。~~

WordPressのテーマをSimplicity2からCocoonへ変更したのが原因だと思うのだが、原因不明です。

調査中です。

追記（2019/1/29）：その後、猛烈な調査によって上のボタンクリックでBootstrapモーダルダイアログが開くようになった。

Cocoonテーマに変更したらBootstrapダイアログが開かなくなった原因と対策

開かなかった原因は、Bootstrapを使うには以下の三つのファイルを読み込む必要があるのだが、それが出来ていなかったのだ。

<script src="js/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

一つ目のjQueryはWordPressのテーマ（今はCocoon）が読み込む場合が多い。なのでワテは読み込んでいない。実際、CocoonはjQueryを読み込んでいる。

次のbootstrap.min.cssは自分で読み込んでいた。

最後のbootstrap.min.jsはBootstrapコードの本体であるが、Cocoonテーマの場合は読み込んでいなかった。なので自分で読み込む必要があったのだ。これを忘れていたのが開かなかった原因。

かつ、bootstrap.min.jsはjQuery本体の読み込みよりも後で読み込む必要がある。なのでCocoonテーマのカスタムフィールドfooter_customに上のBootstrap関連の二行を追加したら、無事にダイアログが開くようになった。

ちなみに、Cocoonの前に使っていたテーマSimplicity2の場合には、bootstrap.min.cssの読み込みだけで良くて、bootstrap.min.js本体は読み込む必要は無かった。理由はSimplicity2テーマ自身がそれを読み込んでいるので。

従って、もし自分でもbootstrap.min.jsを読み込むと二重に読み込む事になる。

その結果、上のボタンクリックでBootstrapのイベントハンドラが二重に実行される？ようで、ボタンクリックイベントの処理がおかしくなり、ダイアログは開くのだが直ぐに閉じてしまう問題が出た。

この症状に関連する情報としては、