您的位置：首页 > Web前端 > JQuery

基于jQuery的弹窗小插件

2017-07-14 17:13 239 查看 
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>基于jQuery的弹窗小插件</title>
</head>

<body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
/*
* background:遮罩层背景色
* title:弹窗标题
* msg:弹窗内容
* width:弹窗宽度
* height:弹窗高度
* img:弹窗背景图
* btnArr:按钮数组（最多两个）
* fnArr:按钮对应的处理方法数组（和按钮相互对应）
* */
function popUp(background,title, msg, width, height,img, btnArr, fnArr) {

var maxWidth = $(window).width(); //屏幕最大宽度
var maxHeight = $(window).height(); //屏幕最大高度

//追加遮罩层
var wrap = $('<div></div>');
wrap.css({
"position": "fixed",
"top": 0,
"left": 0,
"z-index": 99,
"width": "100%",
"height": "100%",
"background": background
});
$("body").append(wrap);

//追加遮罩内容区
var pop = $('<div></div>');
pop.css({
"position": "relative",
"top": (maxHeight - height) / 2,
"left": (maxWidth - width) / 2,
"width": width,
"height": height,
"background": "#fff url("+img+")  no-repeat top 60px center / 146px 80px",
"border-radius": "10px",
"text-align": "center",
"color": "#989898",
"box-shadow": "0 0 15px #999"
});
wrap.append(pop);

//追加标题
if(title != "") {
var title = $('<div>' + title + '</div>');
title.css({
"width": "100%",
"height": "70px",
"line-height": "70px",
"font-size": "20px"
});
pop.append(title);
}

//追加内容
if(msg != "") {
var msg = $('<div>' + msg + '</div>');
msg.css({
"font-size": "14px",
"padding": "90px 0 0 0"
});
pop.append(msg);
}

//追加按钮
if(btnArr != "") {
var btnWrap = $('<div></div>');
btnWrap.css({
"position": "absolute",
"bottom": 0,
"left": "5%",
"width": " 90%",
"display": "block",
"text-align": "center",
"font-size": "17px",
"border-top": "1px solid #ddd"
});
msg.append(btnWrap);
$.each(btnArr, function(i, v) {
var btn = $('<a>' + v + '</a>');
btn.css({
"display": "inline-block",
"width": "48%",
"padding": "15px 0",
"color": "#00C3AB",
"cursor": "pointer"
});
btn.click(fnArr[i]);
btnWrap.append(btn);
});
}
}
function fnSure() {
alert("确定");
}

function fnCancel() {
document.body.remove("wrap");
alert("取消");
}
popUp("#ccc","温馨提示", "确定融合氢气和氧水吗？", 300, 250,"http://wcmtest.uicredit.cn/H5/personal/images/pic@2x.png", ["取消", "确定"], [fnCancel, fnSure]);

</script>
</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航