对象字面量案例-弹层封装

最新推荐文章于 2023-07-13 19:45:42 发布

i'm_zhangting

最新推荐文章于 2023-07-13 19:45:42 发布

阅读量172

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_42549581/article/details/88878793

版权

JavaScript 专栏收录该内容

41 篇文章 2 订阅

订阅专栏

在这里插入图片描述
pop.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>对象字面量案例-弹层</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body {
            position: fixed;
            width: 100%;
            height: 100%;
        }
        .list {
            display: flex;
            height: 100%;
            flex-flow:row nowrap;
            align-items: stretch;
        }
        .list > div {
            flex: 1;
            background: #ffcc00;
            border: 2px solid #ccc
        }
        .see {
            display: none;
        }
        .bg,.popupbox {
            display: none;
        }
        .bg {
            position: absolute;
            top:0;
            background: rgba(0,0,0,0.5);
            width: 100%;
            height: 100%;
            z-index: 999;

        }
        .popupbox {
            position:absolute;
            width: 300px;
            height: 150px;
            background: #fff;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <div class="list">
        <div>
            <button class="see">查看1</button>
        </div>
        <div>
            <button class="see">查看2</button>
        </div>
        <div>
            <button class="see">查看3</button>
        </div>
        <div>
            <button class="see">查看3</button>
        </div>
        <div>
            <button class="see">查看4</button>
        </div>
        <div>
            <button class="see">查看5</button>
        </div>
    </div>
    <div class="popupbox">
        <h4>我是弹出</h4>
        <button class="ok">确定</button>
        <button class="cancel">取消</button>
    </div>
    <div class="bg"></div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="./popup.js"></script>
<script>

</script>
</body>
</html>

方法：

$(function(){
	// 对象字面量
	var obj = {
		//
		init:function() {
			this.bind();
			this.popup();
		},
		bind:function() {
			// 操作方法
			$('.content .list-b').hover(function(){
				$(this).find('.see').show();
			},function(){
				$(this).find('.see').hide();
			});
			
			$('.see').click(function(){
				$('.bg, .popupbox').show();
			});
			
			$('.btn3, .cancel').click(function(){
				$('.bg, .popupbox').hide();
			});
		},
		popup:function(){
			var box = $('.popupbox');
			var _width = document.body.clientWidth;
			var _height = document.body.clientHeight;
			var $width = (_width-box.width())/2;
			var $height = (_height-box.height())/2;
			box.css({'left':$width,'top':$height});		
		}	
	}
	// 没有init,如果有多个方法，那么就要调用多个方法，这样很不方便；
	// obj.bind();
	// obj.popup();
	//如果有 init,只需要调用obj.init()就可以调用所有的方法
	obj.init() //调用
}