Tweet

Pocket

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

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();
	});
});