弹框模板

最新推荐文章于 2024-08-13 16:15:07 发布

weixin_33919950

最新推荐文章于 2024-08-13 16:15:07 发布

阅读量97

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/Cubicluo/blog/817669

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
    <head>
        <title>弹框</title>
        <meta charset="utf-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"name="viewport">
        <meta content="yes"name="apple-mobile-web-app-capable">
        <meta content="black"name="apple-mobile-web-app-status-bar-style">
        <meta content="telephone=no"name="format-detection">
        <meta content="email=no"name="format-detection">
        <style>
        .modalOverlay {
        /* 整个弹框 */
        background: transparent;
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        text-align: center;
        z-index: 4;
        }
        .modalMengCeng {
        /* 弹框弹出时的黑色背景 */
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        opacity: 0.5;/* 控制黑色背景透明度 */
        z-index: 5;
        background: #000000;/* 黑色背景颜色 */
        }
        .discussTanKuang {
        /* 作为控制整个弹框的钩子 */
        display: none; /* 弹框默认隐藏 */
        font-size: 0.3rem;
        }
        .modalDiscussData {
        /* 控制弹框内容体的样式，即中间白色放内容的部分 */
        position: fixed;
        top: 50%;
        margin-top: -2.83rem;/* 设置为高度的一半，使其垂直居中 */
        z-index: 6;/* 这里要比其他的z-index大 */
        left: 50%;
        margin-left: -3.19rem;/* 宽度的一半，使水平居中 */
        border-radius: 0.2rem;/* 控制圆角 */
        width: 6.38rem;/* 内容宽度 */
        height: 5.66rem;/* 内容高度 */
        background: white;/* 内容背景色 */
        border: 1px solid #000;/* 边框色 */
        text-align: center;
        opacity: 1 !important;
        }
        </style>
    </head>
    <body>
        <p class="open">点击打开弹框</p>
        <!--弹框开始-->
        <div class="modalOverlay discussTanKuang">
            <!--弹框蒙层开始-->
            <div class="modalMengCeng"></div>
            <!--弹框蒙层结束-->
            <!-- 弹框内容区域开始 -->
            <div class="modalDiscussData">
                <p class="close">点击关闭</p>
            </div>
            <!-- 弹框内容区域结束 -->
        </div>
        <!--评价弹框结束-->
        <script type="text/javascript">
        //这里要引入zepto或jq
        </script>
        <script type="text/javascript">
        $(function(){
        // 点击弹出弹框开始
        $(".open").click(function(){
        $(".discussTanKuang").show();
        })
        // 点击弹出弹框结束
        // 点击关闭弹框开始
        $(".close").click(function(){
        $(".discussTanKuang").hide();
        })
        // 点击关闭弹框结束
        })
$(function() {
	function bodyScroll(event) {
		event.preventDefault();
	}
	$(".modalMengCeng").each(function() {
		$(this)[0].addEventListener('touchmove', bodyScroll, false); //蒙层防触摸
	})
	
})
        </script>
    </body>
</html>

转载于:https://my.oschina.net/Cubicluo/blog/817669