html手写弹出层提示框

最新推荐文章于 2025-03-30 12:05:26 发布

阔爱滴二狗子

最新推荐文章于 2025-03-30 12:05:26 发布

阅读量1k

点赞数

文章标签： html html5 css3 javascript

本文链接：https://blog.youkuaiyun.com/qq_43440659/article/details/113308491

版权

项目有时候需要单独写HTML文件，不能依赖任何插件，找了好久，根据业务需求自己改了一下样式，有需要的可以直接复制使用

<html>
	<head>
		<meta charset="utf-8">
    </head>
    <style>
        .header{
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 26px;
            background: #e5e5e5;
            color: #c0282f;
            font-weight: 500;
        }
       .footer{
           width: 100%;
           height:52px;
           text-align: center;
           line-height: 52px;
           font-size: 22px;
           position: absolute;
           left: 0;
           right: 0;
           bottom: 0;
           display: flex;

       }
       .confirm{
           width: 50%;
           height: 100%;
           color: #ffffff;
           background: #c0282f;

       }
       .cancel{
           width: 50%;
           height: 100%;
           color: #c0282f;
           background-color: #e5e5e5;
       }
       .content{
           font-size: 18px;
           text-align: center;
           line-height: 80px;
       }
    </style>
    <body>
        <div id="Idiv" style="display:none; position:absolute; z-index:1000;width:300px;height:200px;background: white;">
            <div class="header">提示</div>
            <div class="content">
                恭喜您，提交成功！
            </div>
            <div class="footer">
                <div class="confirm" onclick="closeDiv()">确定</div>
                <div class="cancel" onclick="closeDiv()">取消</div>
            </div>
        </div>
        <div onclick="showDiv()">点击</div>
	</body>
			<script>
				/*
				 * 弹出DIV层
				*/
				function showDiv()
				{
                    console.log('111')
					var Idiv     = document.getElementById("Idiv");
					var mou_head = document.getElementById('mou_head');
					Idiv.style.display = "block";
					//以下部分要将弹出层居中显示
					Idiv.style.left=(document.documentElement.clientWidth-Idiv.clientWidth)/2+document.documentElement.scrollLeft+"px";
					Idiv.style.top =(document.documentElement.clientHeight-Idiv.clientHeight)/2+document.documentElement.scrollTop-50+"px";
					console.log(Idiv.style.left,Idiv.style.top)
					//以下部分使整个页面至灰不可点击
					var procbg = document.createElement("div"); //首先创建一个div
					procbg.setAttribute("id","mybg"); //定义该div的id
					procbg.style.background = "#000000";
					procbg.style.width = "100%";
					procbg.style.height = "100%";
					procbg.style.position = "fixed";
					procbg.style.top = "0";
					procbg.style.left = "0";
					procbg.style.zIndex = "500";
					procbg.style.opacity = "0.6";
					procbg.style.filter = "Alpha(opacity=70)";
					//背景层加入页面
					document.body.appendChild(procbg);
					document.body.style.overflow = "hidden"; //取消滚动条
				}
				function closeDiv() //关闭弹出层
				{
					var Idiv=document.getElementById("Idiv");
					Idiv.style.display="none";
					document.body.style.overflow = "auto"; //恢复页面滚动条
					var body = document.getElementsByTagName("body");
					var mybg = document.getElementById("mybg");
					body[0].removeChild(mybg);
				}
			</script>
</html>

源文档地址