封装一个弹窗

时间 2019-11-25

原文原文链接

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>弹窗</title>
	<link rel="stylesheet" href="http://v3.bootcss.com/dist/css/bootstrap.min.css">
	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>
	<div class="box">
		<button class="btn btn-default">弹框</button>
	</div>
</body>
<script>
	$.MyCommon = {
		PagePopup: function(options) {
			var defaults = {
				title: '提示', //提示头
				successBtn: '肯定', //肯定按钮
				cancelBtn: '', //是否须要取消按钮
				fn: null, //回调函数
				msg: '', //提示信息
				tipsColor: '#666', //提示问题颜色
				popupWidth: '425px' //弹窗宽度
			};
			var options = $.extend(defaults, options); //合并参数信息
			var loadingHtml = '<div id="loadingPage">' +
				'	<div style="position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 9;background-color: #000000;transition: opacity 0.15s linear;-webkit-transition: opacity 0.15s linear;-moz-transition: opacity 0.15s linear;-o-transition: opacity 0.15s linear;opacity: 0.5;filter: alpha(opacity=50);"></div>' +
				'	<div style="width: ' + options.popupWidth + ';height: auto;background: #fff;border-radius: 10px;position: fixed;z-index: 29;top: 50%;left: 50%;-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%)">' +
				'		<div style="width: 100%;height: 75px;line-height: 75px;text-align: center;color: #ff8b36;font-size: 30px;letter-spacing: 2px">' +
				options.title +
				'		</div>' +
				'		<div style="padding: 20px;color: ' + options.tipsColor + ';">' +
				'			<p style="text-align: center; margin: 30px 0 40px;">' + options.msg + '</p>' +
				'		</div>' +
				'		<div  style="height: 60px;line-height: 60px;border-top: 1px solid #b3b3b3;">' +
				'			<a class="success" style="text-align: center;display: block;color: #666666;cursor: pointer;font-size: 25px;letter-spacing: 5px;width:49.5%;float:left;">' + options.successBtn + '   </a><a class="cancel" style="text-align: center;display: none;color: #666666;cursor: pointer;font-size: 25px;letter-spacing: 5px;width:49.5%;float:left;border-left:1px solid #ddd;">' + options.cancelBtn + '</a>' +
				'		</div>' +
				'	</div>' +
				'</div>';
			$('body').append(loadingHtml);
			if (options.cancelBtn) { //若是cancelBtn不传参数，默认只有一个按钮
				$('#loadingPage .cancel').show();
			} else {
				$('#loadingPage .cancel').hide().prev().css('width', '100%');
			}
			$('#loadingPage').find('.success').click(function() { //肯定按钮点击事件
				$.MyCommon.removePage();
				if (defaults.fn != null) { //若是回调函数不为空，则调用
					return defaults.fn();
				}

			})
			$('#loadingPage').find('.cancel').click(function() { //取消按钮点击事件
				$.MyCommon.removePage();
			})

		},
		removePage: function() { //关闭弹窗
			$('#loadingPage').remove();
		}
	}


	//	按钮点击
	$('.btn').click(function() {
		$.MyCommon.PagePopup({
			msg: '内容区域，内容区域，内容区域，',
			title: '舒适提示',
			cancelBtn: '取消'
		});
	})

</script>

</html>

使用方法：css

肯定取消，两个按钮：html

$.MyCommon.PagePopup({msg : '提示内容' ,title : '弹窗标题',cancelBtn : '取消'});jquery

只有一个肯定按钮：web

$.MyCommon.PagePopup({msg : '提示内容' ,title : '舒适提示'});bootstrap

以上参数不传，则为默认。app

回调函数使用：ide

$.MyCommon.PagePopup({msg : '12143567586' ,title : '舒适提示',cancelBtn : '取消',fn:function(){alert('你点击了肯定')}});函数