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>
以上。