ページ内目次

URLハッシュでBootstrap4のモーダルを開く

ランディングページであるために、メールフォームの送信完了画面にページ遷移せず、ポップアップでサンクスメッセージを表示させたい。
できれば、Bootstrapのモーダルを使用して欲しいという依頼がありました。

Bootstrapのモーダルは、通常はボタンクリックで開くのですが、それをクリックせずに開いた状態にするために、メール送信後にURLハッシュをつけて同ページを開き、URLハッシュの判定でモーダルのクラス属性を書き換えてみたのですが、Bootstrap4のモーダルがなかなかややこしくてうまく開閉できませんでした。

それなら、モーダルのtoggleに対してボタンクリックと同様の指示を直接してみると、あっさり解決。

コードは、以下の通りでした。

<script>
	$(function(){
		var hash = window.location.hash;
		if(hash == '#thanksModal'){
			$(hash).modal('toggle');
		}
	});
</script>
↑上へまいりま〜す