您的位置：首页 > 其它

案例一、自定义弹出小窗口

2017-03-08 16:27 281 查看

由于浏览器默认的小窗口可能不太美观，所以需要我们自己去写一个，首先设计好这个小窗口的尺寸以及样式，然后为其添加必要的按钮。在父窗口上点击时触发事件使其弹出在窗口自己想要的位置上。

有时候可能需要弹出小窗口时让父窗口有一层透明度，且父窗口不可操作。那么可以在父页面与弹出窗口之间加入一个和父窗口一样大小的页面，用 index 确定他们三者之间的层级关系。然后用display：none使其隐藏，当触发了某些事件弹出小窗口时，使其显示。

小窗口都有关闭按钮，当点击关闭按钮时触发事件，使小窗口和中间那层有透明度的窗口隐藏。

这样一个自定义的小窗口就显示出来了。

接下来附上本人的源代码，关于样式定义可能有些繁琐，但是希望可以对需要的人有点帮助：

<!DOCTYPE html>

<html>

<head>

<meta charset = "utf-8">
<title>showDialog</title>
<style type="text/css">

*{
margin: 0px;
padding: 0px;
}
#dialog{
z-index: 1;
background: lightgreen;
width: 800px;
height: 600px;
margin: 0 auto;

}
#dialog .textdiv span{
font-size: 20px;
color: red;
font-weight: bold;
padding-top: 100px;
padding-left: 100px;
}
#dialog .textdiv .testbutton:hover{
background: red;
}
#mid{
margin-top: 0px;
position: absolute;
z-index: 2;
width: 800px;
height: 600px;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;

}
.button{
position: fixed;
background: #FAEE1C;
height: 60px;
width: 150px;
border:2px dotted red;
text-align: center;
margin: 300px 300px;
}
#pop_frame{
position: absolute;
z-index: 3;
height:180px;
width: 350px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;

}
.frame_top{

height:50px;
background: #40A798;
}
.frame_top .tip{
font-size: 16px;
line-height: 50px;
padding-left: 20px;
font-weight: bold;
font-family: "微软雅黑";
float: left;
}
.frame_top .close span{
position: relative;
top:19px;
right: 20px;
height: 20px;
width: 30px;
border:1px solid #FFF;
font-size: 12px;
font-family: "微软雅黑";
float: right;
line-height: 20px;
}
.frame_top .close span:hover{
cursor:pointer;
background: rgba(128,128,128,0.3);
}
.frame_body{
height: 90px;
background: #F5E1DA;

}
.frame_body .text{
padding-top: 30px;
font-size: 16px;
padding-left: 100px;
font-weight: bold;
font-family: "微软雅黑";
}
.bottom{
height: 40px;
background: #F5E1DA;
}
.button_left{
width: 45px;
height: 28px;
margin-left:80px;
background: #40A798;
font-size: 16px;
font-weight: bold;
font-family: "微软雅黑";
}
.button_right{
width: 45px;
height: 28px;
margin-left:80px;
background: #40A798;
font-size: 16px;
font-weight: bold;
font-family: "微软雅黑";
}

</style>

</head>

<body>



<div id = "pop_frame" style="display:none">

<div class = "frame_top">
<span class = "tip">提示框</span>
<div class = "close" onclick="close_pop()"><span>关闭</span></div>
</div>

<div class = "frame_body">
<div class = "text">这是一个弹出窗口？</div>
</div>


<div class="bottom">
<input type = "button" class = "button_left" onclick="#" value="Yes">
<input type = "button" class = "button_right" onclick="#" value="No">
</div>

</div>



<div id = "mid" style="display:none"></div>



<div id = "dialog">
<div class = "textdiv">
<span> 这有一段文字</span>
<input type="button" class = "testbutton" value="点不动我">
</div>
<input type = "button" class = "button" onclick = "showDialog()" value="点我弹出对话框">

</div>



<script type="text/javascript">

function showDialog(){
var dialog = document.getElementById("pop_frame").style.display;
if(dialog == 'none'){
document.getElementById("pop_frame").style.display = 'block';

var middiag = document.getElementById("mid");
middiag.style.display = "block";
middiag.style.background = "rgba(128,128,128,0.3)";
}
if(dialog == "block"){
document.getElementById("pop_frame").style.display = 'none';
}
}

//关闭小窗口，使中间的那层页面和小窗口隐藏，父页面呈现
function close_pop(){
var main = document.getElementById("pop_frame");
main.style.display = "none";
document.getElementById("mid").style.display = "none";
}

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航