* {
padding: 0;
margin: 0;
}
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.window {
width: 20%;
padding-bottom: 20px;
background-color: #fff;
position: fixed;
display: none;
margin-bottom: 100px;
border: 1px solid #E0DFDF;
}
.add_btn {
height: 1400px;
cursor: pointer;
}
.btn_text {
width: 80px;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
margin-top: -40px;
margin-left: -20px;
background-color: #FDDB54;
}
.border_add_nav {
width: 100%;
border-bottom: 1px solid #E0DFDF;
}
.border_add_nav_box {
width: 90%;
margin: 0 auto;
font-size: 16px;
}
.border_add_main_content {
width: 100%;
margin-left: 5%;
margin-bottom: 3%;
overflow: hidden;
overflow-y: auto;
}
.border_add_btn_box {
width: 90%;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.add_title {
color: #20AAE4;
}
.name,
.input {
margin-top: 30px;
float: left;
}
.input {
width: 160px;
height: 40px;
text-align: center;
outline: none;
appearance: none;
-moz-appearance: none;
border-radius: 4px;
border: 1px solid #c8cccf;
color: #000;
}
.cancel,
.save {
width: 80px;
height: 40px;
line-height: 40px;
float: left;
color: #fff;
text-align: center;
border-radius: 5%;
cursor: pointer;
}
.cancel {
margin-right: 10px;
background: #E0DFDF;
}
.save {
background: #20AAE4;
}
.mask {
position: absolute;
top: 0;
display: none;
background-color: rgba(0, 0, 0, 0.5);
}
添加
新增
X
名称:
$(window).ready(function() {
$("#btn_center").click(function() {
$('.mask').css('display', 'block');
$('.mask').css('width', $(window).width())
$('.mask').css('height', $(document).height())
popCenterWindow();
});
});
//获取窗口的高度
var windowHeight;
//获取窗口的宽度
var windowWidth;
//获取弹窗的宽度
var popWidth;
//获取弹窗高度
var popHeight;
function init() {
windowHeight = $(window).height();
windowWidth = $(window).width();
popHeight = $(".window").height();
popWidth = $(".window").width();
}
//关闭窗口的方法
function closeWindow() {
$(".close_btn").click(function() {
$('.window').hide("slow");
$('.mask').css('display', 'none');
});
}
//定义弹出居中窗口的方法
function popCenterWindow() {
init();
//计算弹出窗口的左上角X的偏移量
var popX = (windowWidth - popWidth) / 2;
// 计算弹出窗口的左上角Y的偏移量为窗口的高度 - 弹窗高度 / 2 + 被卷去的页面的top
var popY = (windowHeight - popHeight) / 2 + $(document).scrollTop();
//设定窗口的位置
$("#center").css("top", popY).css("left", popX).slideToggle("fast");
closeWindow();
}
一键复制
编辑
Web IDE
原始数据
按行查看
历史