模态框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #mask {position: fixed;bottom: 0;top: 0;right: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, .8);display: none;z-index: 99999;}
        #mask .container {width: 80%;background-color: #fff;margin: auto;border-radius: 4px;padding: 4px;top: -100%;position: relative;transition: top .5s ease;}
        #mask .container .body-header {border-bottom: 1px solid #ccc;padding: 10px;}
        #mask .container .body-content {padding: 10px;}
        #mask .container .body-content.center {line-height: 50px;}
        #mask .container .body-footer {border-top: 1px solid #ccc;padding: 10px;}
    </style>
</head>

<body>
    <button>modal</button>
    <div id="mask">
        <div class="container">
            <div class="body-header">
                我是头部
            </div>
            <div class="body-content">
                我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我
            </div>
            <div class="body-footer">
                我是尾部
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
    <script>
    $(function() {
        var $mask = $('#mask');
        var $mask_container = $mask.find('.container');
        $('body').on('touchstart', 'button', function(event) {
            $mask.css({ 'display': 'flex' })
            setTimeout(function() {
                $mask_container.css('top', '0px')
            }, 1)
            event.stopPropagation();
        })

        $('body').on('touchstart', '#mask .container', function(event) {
            $mask_container.css('top', '-100%')
            event.stopPropagation();
        },false)

        $(document).on('touchstart', function() {
            $mask.css('display', 'none')
            $mask_container.css('top', '-100%')
        })
    })
    </script>
</body>

</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容