タブを閉じようとしたらモーダルウィンドウが表示される方法

こんにちは。WEBデザイナーのねこふらいです！

ネットサーフィンをしていると、稀に「タブを閉じようとカーソル移動すると、モーダルウィンドウが表示されるギミック」を見かけることがあります。

これってユーザーの離脱を防止する上で使えるのでは？

ということで、今回はjQueryを使ってユーザー離脱防止に繋がるかもしれないギミックを作ってみました。

1 仕組みを解説
2 HTML
3 CSS
4 jQuery

仕組みを解説

簡単に説明すると、ユーザーがページを閉じようとマウスカーソルをブラウザ上部に移動させると、コンテンツが表示される仕組みです。

思わずユーザーが「なんだろう？」と目が行く仕様になっていますね。

が、悪用は厳禁なのであしからず（やりすぎたらうざがられます）。

一番下にデモもありますので、是非参考にしてください！

HTML

<div id="msk">
<div id="mskInner">
<img src="images/cat1.jpg">
<p id="return">× 閉じる</p>
</div>
</div>

<div id="mskSwitch"></div>

CSS

#msk {
    width: 100vw;
    height: 100vh;
    background: #333;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 90;
}

#msk #mskInner {
    text-align: center;
}

#msk #mskInner #return {
    width: 150px;
    margin: 20px auto;
    color: #fff;
    padding: 15px 0;
    border: solid 1px #fff;
    cursor: pointer;
}

/*mskInnerの位置調整*/

#mskInner {
    position: absolute;
    top: -100%;
    left: 0;
    right: 0;
}

/*マスク非表示*/

#msk {
    display: none;
}

/*マスクスイッチ*/

#mskSwitch{
    width: 100vw;
    height: 200px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

jQuery

$(function () {

    $('#mskSwitch').on('mouseover', function () {
        $('#msk').fadeIn(200);
        $('#mskInner').delay(200).animate({
            top: '20%'
        }, 500);
    });

    $('#return').on('click', function () {
        $('#mskInner').animate({
            top: '-100%'
        }, 500);
        $('#msk').delay(300).fadeOut(200);
    });

});

デモはこちら