画面でエフェクトの実現の(一) --ダイアログのポップアップ

一般的に、画面でボタンをクリックすると、bootstrapスタイルのダイアログ（modal）を表示する。

#画面なかに実装方法
・ダイアログをポップアップするボタンを指定する
・ポップアップするダイアログをdivで編集して、スタイルを設定する
#HTMLソースで説明する
HTMLだけでダイアログを実現できる。
・ボタンで「data-toggle="modal"」「data-target="#modalId"」しかを指定しない、別のonclickなど指定する必要がない。

" data-sourcepos="9:1-33:117">

	ボタン
</button>```

・具体的なダイアログを設定する。idは一致です。「class="modal fade"」のcssのスタイルでボタンクリック前に非表示で、クリックすると、表示された。
```<!-- モーダル・ダイアログ -->
<div class="modal fade" id="modalId" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			モーダルの内容
		</div>
	</div>
</div>```
もし、モーダルが表示されたら、イベントが必要でしたら、下記のjavascriptを作る。

```$(#modalId).on('shown.bs.modal', function (e) {
	// 処理
});```

いいリンク
http://bootstrap3.cyberlab.info/javascript/modals-events.html
https://bootstrap-guide.com/javascript/modals/events

doc:
https://getbootstrap.jp/docs/4.2/getting-started/introduction/#%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%83%86%E3%82%A3