实现页面的div弹出提示窗
程序员文章站
2022-05-02 09:38:07
...
此处实现了一个简单的全屏幕居中的弹出框，直接附上代码。
知识要点：z-index就是网页的z轴，用相对定位绝对定位把两个层重叠在一起，z-index的值越大，就越靠上，注意，z-index没有单位，z-index：99；这样写就够了
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.mask {
border-radius: 10px;
position: absolute;
filter: alpha(opacity=60); background-color: #CECFC9;
z-index: 1002;
/*opacity:0.5; -moz-opacity:0.5;需要设置弹出窗口的透明度的时候打开*/
color:black;
text-align: center;
/*margin:0 auto;*/
width:250px;
height:100px;
}
</style>
</head>
<body>
<div id="mask" class="mask" style="display:none;">
<div><p><span id="content" ></span></p></div>
<hr style="height:1px;border:none;border-top:1px solid #AAABA6;">
<div ><button style="color:#0376F2;border:none;background-color: #CECFC9;width:50px;font-size: 16px;" onclick="hideTip()">好</button></div>
</div>
<div>
<button onclick="showTip('测试')">点击弹出框</button>
</div>
<!--记得在此处修改jquery插件的文件地址-->
<script src="jquery.1.9.0.min.js"></script>
<script type="text/javascript">
var width = document.body.clientWidth;
var height = document.body.clientHeight;
function showTip(text){
$('#mask').css('top', (height-100)/2);
$('#mask').css('left', (width- 250)/2);
$("#content").text(text);
$("#mask").show();
}
//隐藏遮罩层
function hideTip(){
$("#mask").hide();
}
</script>
</body>
</html>上一篇： 再美的情话，都抵不过一句“你是我的女人”
下一篇： 网络少年网络成瘾的原因有哪些