一个很好的页面弹出div的写法

最新推荐文章于 2020-05-19 23:53:20 发布

Rava722

最新推荐文章于 2020-05-19 23:53:20 发布

阅读量3.2k

点赞数

本文链接：https://blog.csdn.net/Rava722/article/details/53537225

版权

主要就是一个css和一个js，然后再自己代码中结果即可

css文件：popwindow.css

.pop_window_show{
visibility: visible;
}
.pop_window_hidden{
display: none;
}
.pop_window{
min-width: 500px;
min-height: 300px;
position: fixed;
top: 10%;
left: 10%;
z-index:1000;
overflow: auto;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
background:#fff;
border: 1px solid #ccc;
-webkit-box-shadow:0 1px 15px 1px #ccc;
-moz-box-shadow:0 1px 15px 1px #ccc;
box-shadow:0 1px 15px 1px #ccc;
}
.pop_window_contentdiv{

}
.pop_close_btn{
position: absolute;
width:40px;
height:22px;

cursor:pointer;
top: 9px;
right: 9px;
}
.pop_close_btn:hover{
background: url(../../images/icons/close_pres.png) no-repeat center;
}
.pop_window_titlediv{
height:40px;
width: 100%;
line-height: 40px;
border-bottom: 1px solid #ccc;
}
.pop_title_txt{
color:#333;
font-size: 16px;
font-family: "Microsoft YaHei";
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 10px;
}

.pop_window_mask_main{
width: 100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:1;
text-align: center;
background-color:#333;
opacity:0.3;
display:none;
}

.pop_detail_item_div{
height: 30px;
line-height: 30px;
margin: 5px;
}

.pop_detail_item_div span{
font-size: 14px;
color: #333;
font-family: "Microsoft Yahei";
display: inline-block;
width: 120px;
vertical-align: middle;
}

.pop_detail_item_span{
font-size: 14px;
color: #333;
font-family: "Microsoft Yahei";
display: inline-block;
width: 120px;
vertical-align: middle;
}

.pop_detail_item_div input{
display: inline-block;
height: 28px;
line-height:28px;
min-width: 400px;

appearance: none;
outline: 0;
background-color: #fff;
border: 1px solid #cccccc;
border-radius: 1px;
text-align: left;
font-size: 12px;
color: #333333;
font-family: "Microsoft YaHei";
padding-left: 5px;
}

.pop_detail_item_div textarea {
display: inline-block;
line-height:28px;
min-width: 400px;
appearance: none;
outline: 0;
background-color: #fff;
border: 1px solid #cccccc;
border-radius: 1px;
text-align: left;
font-size: 12px;
color: #333333;
font-family: "Microsoft YaHei";
padding-left: 5px;
}

js文件：popwindow.js

//设置窗口大小、位置
function setPopWindowSize(id,height,width,top,left){
if(height!=null)
$("#"+id).css('height', height);
if(width!=null)
$("#"+id).css('width', width);
if(top!=null)
$("#"+id).css('top', top);
if(left!=null)
$("#"+id).css('left', left);
}
//关闭弹窗
function closePopWindow(id){

setTimeout( function() {
var outClass = 'pt-page-fade';
var inClass = 'pt-page-moveFromTop pt-page-ontop';
// $("#detail-page").css("visibility","visible");
$("#"+id).removeClass('pop_window_show');
$("#"+id).addClass('pop_window_hidden');
$("#"+id).removeClass(inClass);
$("#"+id).addClass(outClass);
// $("#"+id).css("display","none");
});
}

//打开弹窗
function openPopWindow(id){
setTimeout( function() {
var outClass = 'pt-page-fade';
var inClass = 'pt-page-moveFromTop pt-page-ontop';
// $("#"+id).css("display","block");
$("#"+id).removeClass('pop_window_hidden');
$("#"+id).addClass('pop_window_show');
$("#"+id).removeClass(outClass);
$("#"+id).addClass(inClass);
});
}

HTML页面：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这是一个HTML5的网页</title>
<link rel="stylesheet" type="text/css" href="popwindow.css">
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script type="text/javascript" src="popwindow.js"></script>
</head>
<body>
<div id='test'> 弹出一个新的div</div>
<div id='alert' class="pop_window pop_window_hidden">
<div class="pop_close_btn" οnclick="closePopWindow('alert')" >关闭</div>
</div>
<script type="text/javascript">
$(function(){
$("#test").click(function(){
setPopWindowSize('alert','300px','200px','100px','200px');
openPopWindow('alert');
});
});
</script>
</body>
</html>