<!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>
使用方法:
确定取消,两个按钮:
$.MyCommon.PagePopup({msg : '提示内容' ,title : '弹窗标题',cancelBtn : '取消'});
只有一个确定按钮:
$.MyCommon.PagePopup({msg : '提示内容' ,title : '温馨提示'});
以上参数不传,则为默认。
回调函数使用:
$.MyCommon.PagePopup({msg : '12143567586' ,title : '温馨提示',cancelBtn : '取消',fn:function(){alert('你点击了确定')}});