封裝一個彈窗

時間 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('你點擊了肯定')}});函數