自适应弹出框-垂直居中

最新推荐文章于 2024-05-03 02:10:24 发布

滴滴月空雨

最新推荐文章于 2024-05-03 02:10:24 发布

阅读量1.2w

点赞数 3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="……"/>
<title>自适应弹出框</title>
<style type="text/css">
.box-mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.5;
	filter: alpha(opacity=50);
	z-index: 99;
	display: none;
}
.box {
	position: absolute;
	padding:10px;
	border: 1px solid #ccc;
	background: #F0F0F0;
	text-align: center;
	z-index: 101;
	display: none;
}
.btnDel {
	font: "微软雅黑";
	font-size: 14px;
	width: 125px;
	height: 33px;
	line-height: 33px;
	vertical-align: middle;
	background-image: url(images/btn.png);
	background-repeat: no-repeat;
	border: 0px !important;
	color: #fff;
	cursor: pointer;
	background-color: transparent;
}
</style>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var isOpen = 0;
    //全局变量，判断是否已经打开弹出框
    $(".btnDel").click(function() {
        //$(".box-mask").css({"display":"block"});
        $(".box-mask").fadeIn(500);
        center($(".box"));
        //载入弹出窗口上的按钮事件
        checkEvent($(this).parent(), $(".btnSure"), $(".btnCancel"));
    });
    function center(obj) {
        //obj这个参数是弹出框的整个对象
        var screenWidth = $(window).width(), screenHeigth = $(window).height();
        //获取屏幕宽高
        var scollTop = $(document).scrollTop();
        //当前窗口距离页面顶部的距离
        var objLeft = (screenWidth - obj.width()) / 2;
        ///弹出框距离左侧距离
        var objTop = (screenHeigth - obj.height()) / 2 + scollTop;
        ///弹出框距离顶部的距离
        obj.css({
            left:objLeft + "px",
            top:objTop + "px"
        });
        obj.fadeIn(500);
        //弹出框淡入
        isOpen = 1;
        //弹出框打开后这个变量置1 说明弹出框是打开装填
        //当窗口大小发生改变时
        $(window).resize(function() {
            //只有isOpen状态下才执行
            if (isOpen == 1) {
                //重新获取数据
                screenWidth = $(window).width();
                screenHeigth = $(window).height();
                var scollTop = $(document).scrollTop();
                objLeft = (screenWidth - obj.width()) / 2;
                var objTop = (screenHeigth - obj.height()) / 2 + scollTop;
                obj.css({
                    left:objLeft + "px",
                    top:objTop + "px"
                });
                obj.fadeIn(500);
            }
        });
        //当滚动条发生改变的时候
        $(window).scroll(function() {
            if (isOpen == 1) {
                //重新获取数据
                screenWidth = $(window).width();
                screenHeigth = $(window).height();
                var scollTop = $(document).scrollTop();
                objLeft = (screenWidth - obj.width()) / 2;
                var objTop = (screenHeigth - obj.height()) / 2 + scollTop;
                obj.css({
                    left:objLeft + "px",
                    top:objTop + "px"
                });
                obj.fadeIn(500);
            }
        });
    }
    //导入两个按钮事件 obj整个页面的内容对象，obj1为确认按钮，obj2为取消按钮
    function checkEvent(obj, obj1, obj2) {
        //确认后删除页面所有东西
        obj1.click(function() {
            //移除所有父标签内容
            obj.remove();
            //调用closed关闭弹出框
            closed($(".box-mask"), $(".box"));
        });
        //取消按钮事件
        obj2.click(function() {
            //调用closed关闭弹出框
            closed($(".box-mask"), $(".box"));
        });
    }
    //关闭弹出窗口事件
    function closed(obj1, obj2) {
        obj1.fadeOut(500);
        obj2.fadeOut(500);
        isOpen = 0;
    }
});
</script>
</head>


<body>
<input type="submit" class="btnDel" value="删除"/>
<div class="box-mask"></div>
<div class="box">
  <p>确定要删除吗？</p>
  <p>
    <input type="button" value="确定" class="btnSure"/>
    <input type="button" value="取消"class="btnCancel"/>
  </p>
</div>
</body>
</html>

滴滴月空雨

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
自适应弹出框-垂直居中

自适应弹出框.box-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; filter: alpha(opacity=50); z-index: 99; display: none;}.box { position: ab
复制链接

扫一扫