ドーン

ソースコード

あくまでも一例なので参考程度に使ってください。

ドーンと開くHTML

<a href="#test" rel="leanModal">ドーン！！と表示</a>

モーダル側HTML

<div id="test" class="modal">
<p>ドーンとモーダルウィンドウがでたよ</p>
<img src="/wp-content/themes/onmtp/imgs/do-nn.png" class="do-nn">
</div>

ぷるぷるCSS

/* 例は常時ぷるぷる */
#lean_overlay {
	display: none;
	position: fixed;
	z-index: 100;
	top: 0px;
	left: 0px;
 	height: 100vh;
 	width: 100vw;
	background: #000;

}

.modal {
	display: none;
	width: 90%;
	max-width:500px;
	padding: 10px;
	background: #FFF;
}

ドーン！にはleadModal.jsが必要になるので訪問してゲットしてください。
➡︎　leanModal.js

ぷるぷるJS

<script src="/jquery.leanModal.min.js"></script>
<script type="text/javascript">
$(function() {
  $('a[rel*=leanModal]').leanModal({
    overlay : 0.8
  });
});
</script>

使い方

• この文言の説明、モーダルウィンドウで「ドーン」と表示させよう！！
• このボタンおしたら「ドーン」と画面いっぱいに表示したいんだけど、できます？