さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【JQuery】ダイアログを自作で実装する

Pocket
LINEで送る

ダイアログを自作で実装する方法です。

html

<p class="openButton">ダイアログを開く</p>

<div class="dialog">
	<p>googleにリンクしますか?</p>

	<div class="buttonBox">
		<a href="https://www.google.co.jp/">OK</a>
		<a href="javascript:void(0);" class="closeButton">キャンセル</a>
	</div>
</div>

scss

.openButton {
	margin: 0;
	padding: 0;
	width: 150px;
	height: 50px;
	line-height: 50px;
	font-size: 15px;
	color: #fff;
	font-weight: bold;
	text-align: center;
	background-color: #3f3f3f;

	&:hover {
		@include opacity(0.7);
		text-decoration: none;
	}
}

.dialog {
	overflow: hidden;
	position: fixed;
	top: 30%;
	height: auto;
	box-sizing: border-box;
	padding: 20px;
	width: 600px;
	display: none;
	border:1px solid #aaa;
	z-index:1000;
	background-color: #fff;
	text-align: center;
	box-shadow:0px 0px 6px 3px rgba(0,0,0,0.13);
	-moz-box-shadow:0px 0px 6px 3px rgba(0,0,0,0.13);
	-webkit-box-shadow:0px 0px 6px 3px rgba(0,0,0,0.13);

	p {
		margin: 0;
		padding: 0;
	}

	.buttonBox {
		padding: 40px 0 0 0;

		a {
			display: inline-block;
			width: 200px;
			height: 40px;
			line-height: 40px;
			margin: 0 50px 0 0;
			font-size: 16px;
			color: #fff;
			font-weight: bold;
			background-color: #FF7F00;
			box-shadow:3px 3px 6px 2px rgba(0,0,0,0.11);
			-moz-box-shadow:3px 3px 6px 2px rgba(0,0,0,0.11);
			-webkit-box-shadow:3px 3px 6px 2px rgba(0,0,0,0.11);

			&:last-child {
				margin: 0;
				background-color: #ccc;
			}

			&:hover {
				opacity: 0.7;
				text-decoration: none;
			}
		}
	}
}

JQuery

$(document).ready(function(){
	var openDialog = $('.openButton'); // ダイアログを開くボタン要素
	var dialogElm = $(".dialog"); // ダイアログの要素
	var closeDialog = $(".closeButton"); // ダイアログを閉じるボタン

	openDialog.on("click", function(){
		// leftの値 = (ウィンドウ幅 -コンテンツ幅) ÷ 2
		var leftPosition = (($(window).width() - dialogElm.outerWidth(true)) / 2);
		dialogElm.css({"left": leftPosition + "px"});
		dialogElm.show();
	});
	
	//閉じるボタンで非表示
	closeDialog.on("click", function(){
		$(this).parents(dialogElm).hide();
	});
});

カテゴリー:HP制作, JQuery

コメントを残す

コメント内容