I wrote a mask layer with jQurey seriously today!

Click to pop up the mask layer

<div class="mask hide"></div>

<div class="alert hide">
    <div class="title">
        <h2>标题</h2>
    </div>
    <div class="content">
        内容
    </div>
    <div class="button">
        <button>确定</button>
        <button>取消</button>
    </div>
</div>

<script src="jquery.js"></script>
<script>
    $(function () {

        $('#btnTest').click(function () {

            $('.mask').removeClass('hide').css({
                height: $('html').height()
            });

            $('.alert').removeClass('hide').css({
                left: ($('html').width() - $('.alert').width()) / 2,
                top: ($(window).height() - $('.alert').height()) / 2
            });

        })

        $('.alert .button button').click(function () {
            $('.mask').addClass('hide');
            $('.alert').addClass('hide');
        })

        $(window).resize(function () {
            $('.mask').css({
                height: $('html').height()
            });

            $('.alert').css({
                left: ($('html').width() - $('.alert').width()) / 2,
                top: ($(window).height() - $('.alert').height()) / 2
            });
        })
    })
</script>