一定時間だけ表示するモーダルウィンドウ

アラート用のモーダルウィンドウを作りました。
一定時間だけモーダルを表示させます。
表示中にモーダル以外の箇所をクリックした場合はモーダルが非表示になります。

html

<div class="wrap">
  <h1>attention用ポップアップのデモ</h1>
  <p><a href="#demo1" class="modal">クリック１</a></p>
  <p><a href="#demo2" class="modal">クリック２</a></p>


  <!-- 以下がモーダルで呼ばれる -->
  <div class="modalBox" id="demo1">
    <div class="modalInner">
      自動で落ちるポップアップその１
    </div>
  </div>
  <div class="modalBox" id="demo2">
    <div class="modalInner">
      自動で落ちるポップアップその２
    </div>
  </div>
</div>

css

#modalWrap {
	display: none;
	background: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	overflow: hidden;
}

.modalBox {
	position: fixed;
	width: 85%;
	max-width: 420px;
	height: 0;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	overflow: hidden;
	opacity: 1;
	display: none;
	border-radius: 3px;
	z-index: 1000;
}

.modalInner {
	padding: 10px;
	text-align: center;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
}

js(jQuery)

$('.modal').on('click', function () {
	//.modalについたhrefと同じidを持つ要素を探す
	var modalId = $(this).attr('href');
	var modalThis = $('body').find(modalId);
	//bodyの最下にwrapを作る 
	$('body').append('<div id="modalWrap" />');
	var wrap = $('#modalWrap'); wrap.fadeIn('200');
	modalThis.fadeIn('200');
	//モーダルの高さを取ってくる 
	function mdlHeight() {
		var wh = $(window).innerHeight();
		var attH = modalThis.find('.modalInner').innerHeight();
		modalThis.css({ height: attH });
	}
	mdlHeight();
	$(window).on('resize', function () {
		mdlHeight();
	});
	function clickAction() {
		modalThis.fadeOut('200');
		wrap.fadeOut('200', function () {
			wrap.remove();
		});
	}
	//wrapクリックされたら 
	wrap.on('click', function () {
		clickAction(); return false;
	});
	//2秒後に消える 
	setTimeout(clickAction, 2000); return false;
});

解説

クリックされたらhrefと同じIDがついた要素を取ってくる

var modalId = $(this).attr('href'); 
var modalThis = $('body').find(modalId);

このままだとmodalBoxの高さがない状態になってしまうので、modalInnerの高さを効かせる

function mdlHeight() {
	var wh = $(window).innerHeight();
	var attH = modalThis.find('.modalInner').innerHeight();
	modalThis.css({
		height: attH
	});

}
mdlHeight();
$(window).on('resize', function () {
	mdlHeight();
});

setTimeoutで一定時間後に落とす

function clickAction() {
	modalThis.fadeOut('200');
	wrap.fadeOut('200', function () {
		wrap.remove();
	});
}
//中略 
//2秒後に消える
setTimeout(clickAction, 2000)

デモページ