第3回「モーダルウィンドウの使い方」HTML5・CSS・javascript・PHP・jQuery

サンプル   下の「×」ボタンでウィンドウが閉じます。    サンプルページ

 

今回はモーダルウェアについて触れていきます。

 

一応、今回で3回目なので、モーダルウィンドウにはこの記事で最後にします。

 

目次

・具体的なソース

・使い方

・ソースの説明

・まとめ

 


・具体的なソース

 

「modale-content.php」と名まえを付けて保存してください。

<?php /***モーダルウィンドウのCSS 今回はサンプルなのでこのファイルに直書きします****/ ?>
<style>
/* 2番目に表示させるdiv半透明の膜 */
.modal-overlay{
	/* ボックスの重なりの順序を指定 */
	z-index:1;
	/* 位置の固定 */
	position:fixed;
	/* 位置 */
	top:0;
	left:0;
	/* 幅・高さ */
	width:100%;
	height:100%;
	/* 背景の色(半透明) */
	background-color:rgba(51,51,51,0.8);
	/* 外側の余白 */
	margin-top:0px;
	
}

/* モーダルウィンドウのcss */
.modal-content{
	/* css変数 */
	--modal-width: 700px;
	/* 幅・高さ */
	width: var(--modal-width);
	height: auto;
	/* ボックスの重なりの順序を指定 */
	z-index:2;
	/* 背景の色 */
	background-color: #ffffff;
	/* 位置の固定 */
	position: fixed;
	/* 位置 */
	top:20px;
	left:50%;
	/* 位置を真ん中に表示させるため左側の余白を削ります。 */
	margin: 0px 0px 0px  -350px;
	/* 角を丸くします。 */
	border-radius: 10px;
}

/* モーダルウィンドウの中に表示するiframe画面のcss */
.modal-content iframe{
	/* 線 */
	border:none;
	/* 幅 */
	width:694px;
}

/* モーダルウィンドウで表示するtableのcss */
.modal-content_table{
	/* 幅 */
	width: 100%;

}

/* モーダルウィンドウで表示するtableのthのcss */
.modal-content_th{
	/* 文字の色 */
	color:#ffffff;
	/* 文字の配置 */
	text-align: center;
	/* 幅 */
	width: 90%;
	/* 背景の色 */
	background-color: #28d;
	/* 角を丸くします。 */
	border-radius: 10px 10px 0px 0px;
}

/* モーダルウィンドウで表示するtableのtrのh2css */
.modal-content_th h2{
	/* 外側の余白。 */
	margin: 10px;
}

/* モーダルウィンドウを閉じるボタンのcss */
.modal-content_close_botton{
	/* 幅・高さ */
	width: 20px;
	height: 20px;
	/* 背景の色 */
	background-color: #ffffff;
	font-size: 18px;
	/* 文字の太さ */
	font-weight:bold;
	/* 文字の色 */
	color: #28d;
	/* 内側の余白 */
	padding: 0px;
	/* 外側の余白。 */
	margin: 0px;
	/* 角を丸くします。 */
	border-radius: 5px;
	/* 線 */
	border:none;
}

/* モーダルウィンドウを閉じる「×」ボタンのマウスオーバーされた時のcss */
.modal-content_close_botton:hover{
	/* 背景の色 */
	background-color:#000000;
	/* 文字の色 */
	color:  #ffffff;
	/* 指カーソルを表示 */
	cursor: pointer;
}

/* モーダルウィンドウで表示するtableのtdのcss */
.modal-content_td{
	/* 文字の色 */
	color:#000000;
	/* 背景の色 */
	background-color: #ffffff;
	/* 角を丸くします。 */
	border-radius: 0px 0px 10px 10px;
	/* 内側の余白 */
	padding: 0px 30px 0px 30px;
}
</style>


<?php /* モーダルウィンドウのテンプレート */ ?>
<div id="modal-content_window" class="modal-content">
<table class="modal-content_table">
<tr>
<th class="modal-content_th">
<?php /* 変数に値が入っていたらtitleを表示します。 */ ?>
<table class="modal-content_table"><tr><th class="modal-content_th"><h2><?php echo $modal_content_title; ?></h2></th><td><Button type="button"  class="modal-content_close_botton">×</button></td><th width="10px"></th></tr></table>
</th>
</tr>
<tr>
<?php /* 変数に値が入っていたらmessageを表示します。 */ ?>
<td class="modal-content_td">
<p><?php echo $modal_content_message; ?></p>
</td>
</tr>
</table>
<div>
<?php /* 変数に値が入っていたらiframを表示します。 */ ?>
<?php echo $modal_content_iframe; ?>
</div>
</div>

<?php /*<!-- 2番目に表示されるモーダル(オーバーウエィ)半透明な膜 -->*/ ?>
<div class="modal-overlay" ></div>

<?php /* jquery ファイル読み込み宣言 */ ?>
<script src="https://code.jquery.com/jquery-2.0.0.js"></script>

<?php /* 「×」ボタンを押した時に、モーダルウィンドウを非表示にするjavascript */ ?>
<script>
$(".modal-content_close_botton").click(function(){
	$(".modal-content").css('display', 'none');
	$(".modal-overlay").css('display', 'none');
});
</script>

 


・使い方

「modale-content.php」は、別ファイルの「<body></body>」の中でファイルを読み込みます。

読み込み方

ページを読み込む前に、変数に値を代入します。

$modal_content_title = "タイトル";
$modal_content_message = "メッセージ";
$modal_content_iframe = "iframeタグで呼び出したいタグ";

例
<?php
$modal_content_title = "タイトルテスト";
$modal_content_message = "モーダルウィンドウでiframeを表示。";
$modal_content_iframe = "<iframe height='430' src='ここにファイルのURL'></iframe>";
 ?>

注意:iframeの幅はCSSで694pxにしています。ですが、高さはhtmlタグで指定する必要があります。



次に「include()」でファイルを呼び出します。

<?php
include("../modal-content/index.php");
?>

注意:相対パスの場合「..」や「.」に気を付けること。同じ階層から読み込む場合は、「.」一つです。

 

 


・ソースの説明

「modale-content.php」の2行目から122行目までは、CSSスタイルいシートです。

本来なら、別ファイルにCSSをかいて、そのCSSファイルを読み込むのが一般的ですが、今回はサンプルなのでここに書きました。

CSSの別ファイルにして読み込む方法については、以前書いた記事「第1回「CSSスタイルシートファイルの読み込ませ方」」をご確認ください。

別ファイルに書く場合は「<style></style>」タグを書く必要はありません。というか書かない方がよいです。

 

 

「modale-content.php」の22行目から44行目

/* モーダルウィンドウのcss */
.modal-content{
	/* css変数 */
	--modal-width: 700px;
	/* 幅・高さ */
	width: var(--modal-width);
	height: auto;
	/* ボックスの重なりの順序を指定 */
	z-index:2;
	/* 背景の色 */
	background-color: #ffffff;
	/* 位置の固定 */
	position: fixed;
	/* 位置 */
	top:20px;
	left:50%;
	/* 位置を真ん中に表示させるため左側の余白を削ります。 */
	margin: 0px 0px 0px  -350px;
	/* 角を丸くします。 */
	border-radius: 10px;
}

これはモーダルウィンドウのCSSです。注目してもらいたいのは下記です

	/* css変数 */
	--modal-width: 700px;
	/* 幅・高さ */
	width: var(--modal-width);
	/* 位置 */
	top:20px;
	left:50%;
	/* 位置を真ん中に表示させるため左側の余白を削ります。 */
	margin: 0px 0px 0px  -350px;

ここでは、ウィンドウを「中央」に表示させるCSSです。

ウィンドウの幅は700pxです。

それを左から50%(left:50%;)で表示させませす。

そのうえで、外側の余白(左)を-350px分、削ります。(margin: 0px 0px 0px  -350px;)

 

結構、画面中央に表示させるのは手こずるみたいです。

自分もそうでした。

参考サイト:

CSSで中央寄せの方法いろいろメモ

 

 

125行目から151行目までは、モーダルウィンドウのHTML部分です。

ここは特に触れませんが、デザインなどを変えたいなら色々、触ってみてください。

 

154行目から159行目までは、「×」ボタンを押したときにモーダルウィンドウを非表示にする処理です。

<script>
$(".modal-content_close_botton").click(function(){
	$(".modal-content").css('display', 'none');
	$(".modal-overlay").css('display', 'none');
});
</script>

jQuery(javascript)で書いているので、151行目にかいた

<script src="https://code.jquery.com/jquery-2.0.0.js"></script>

のように、ネットでjavascriptファイルを読み込んでいます。

 

 

 


・まとめ

前から気になっていました。モーダルウィンドウ。

「Twitter」や人気のサイトで、使われている気があります。

 

日曜日という事で、少し時間があったので、ゆっくりデザインしてみました。

 

良かったら、使ってみて、スタイルなど変更してみてください。

 


 

今回の記事をかくにあったて参考にしたサイト

modalを画面中央に表示させる書き方

CSSの変数を使う

 

 

参考にさせて頂いたサイトの管理者様、ありがとうございました。

 

 

以上です。お疲れさまでした。

,,,

Leave a comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です