MagnificPopupはこちら
http://dimsemenov.com/plugins/magnific-popup/

やりたいこと

ページを開いた瞬間に以下のようなモーダルが表示される機能を作る。

やり方

headで読み込むファイル

jQueryと、MagnificPopupのJSファイルとCSSファイル。

index.html

	<link rel="stylesheet" href="/css/magnific-popup.css"> 
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
	<script src="/js/jquery.magnific-popup.js"></script>

表示するモーダル部分

id="popup"がポイント。

index.html

	<div id="popup" class="white-popup">
		Dynamically created popup
	</div>

モーダル部分のCSS

index.html

	.white-popup {
		position: relative;
		background: #FFF;
		padding: 20px;
		width: auto;
		max-width: 500px;
		margin: 20px auto;
	}

JavaScript部分

bodyの下の方にかく。src: '#popup'の部分でid="popup"の要素を探して表示する。

index.html

	<script type="text/javascript">
	$(window).load(function(){
		$.magnificPopup.open({
			items: {src: '#popup'},
			type: 'inline', 
			modal: true,
		}, 0);
	});
	</script>

全体

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>modal</title>
	<style type="text/css">
		.white-popup {
		  position: relative;
		  background: #FFF;
		  padding: 20px;
		  width: auto;
		  max-width: 500px;
		  margin: 20px auto;
		}
	</style>
	<link rel="stylesheet" href="/css/magnific-popup.css"> 
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
	<script src="/js/jquery.magnific-popup.js"></script>	
</head>
<body>
	<div id="popup" class="white-popup">
		Dynamically created popup
	</div>

	<script type="text/javascript">
	$(window).load(function(){
		$.magnificPopup.open({
			items: {src: '#popup'},
			type: 'inline', 
			modal: true,
		}, 0);
	});
	</script>    
</body>
</html>

以上。