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