面向对象--封装弹出层

最新推荐文章于 2024-04-03 11:51:06 发布

橘子爱吃香菜

最新推荐文章于 2024-04-03 11:51:06 发布

阅读量210

点赞数 1

分类专栏：弹出层 JavaScript 前端文章标签： javascript html jquery 面向对象编程前端

本文链接：https://blog.csdn.net/weixin_48683052/article/details/123230466

版权

jQuery 弹出层 JavaScript 单例模式 DOM操作

关键词由CSDN通过智能技术生成

前端同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

JavaScript

14 篇文章 15 订阅

订阅专栏

弹出层

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
		<style type="text/css">
			.wrap{
				width: 300px;
				border-radius: 4px;
				box-shadow: 0 0 2px #333;
				background-color: #fff;
			}
			.header{
				background-color: #0078FF;
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
				color: #fff;
				display: flex;
				font-size: 20px;
				padding:10px;
			}
			.title{
				flex-grow: 1;
			}
			.close{
				flex-shrink: 0;
			}
			.content{
				min-height: 100px;
				padding:10px;
			}
		</style>
	</head>
	<body>
		<button type="button">打开</button>
		<script>
			// 封装弹出层
			function Tip(option){
				option=option||{}
				// 标签结构的标题
				this.title=option.title||'提示框';
				// 标签内容
				this.content=option.content||'';
				// 弹出层id
				this.index="id" +(new Date).getTime()
				// 标签结构
				this.el=this.initView();
				
			}
			Tip.prototype.initView=function(){
				var sCon=`
				<div class="wrap" id="${this.index}">
					<div class="header">
						<div class="title">${this.title}</div>
						<div class="close">X</div>
					</div>
					<div class="content">${this.content}</div>
				</div>
				`
				$(sCon).appendTo(document.body);
				$('#'+this.index).find('.close').click(()=>{
					this.hide()
				})
				
				return $('#'+this.index);
			}
			// 展示
			Tip.prototype.show=function(){
				this.el.show()
			}
			// 关闭
			Tip.prototype.hide=function(){
				this.el.hide()
			}
			// 获取单例单例
			function getSingleObj(callback){
				var obj =null;
				return function(option){
					return obj || (obj=new callback(option))
				}
			}
			// 获取创建弹出层的单例方法
			var createTip=getSingleObj(Tip)
			
			// 业务
			$('button:contains(打开)').click(function(){
				var tip=createTip({
				title:'警告框',
				content:'zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz'
			})
				tip.show()
			})
		</script>
	</body>
</html>

橘子爱吃香菜

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
面向对象--封装弹出层

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <style type="text/css"> .wrap{ width: 300px; bo.
复制链接

扫一扫

专栏目录