基于jQuery的弹窗小插件

<!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>

基于jQuery的弹窗小插件相关推荐

13款基于jQuery Mobile的布局插件和示例
现在已经进入了移动互联网时代,因此将你的网站迁移到移动设备上就显得比较重要的.问题是,如何在移动设备的小屏幕中呈现你的网站中的所有内容呢? 本文介绍13款基于jQuery Mobile的布局插件和示例 ...
30个基于jQuery的日期时间选择插件
今天给大家分享30个非常酷的基于jQuery的日期时间选择插件,这是在国外的一个网站看到的,于是就稍作翻译,拿出来与大家分享,英文原文地址:http://www.1stwebdesigner.com/ ...
出位的template.js 基于jquery的模板渲染插件,简单、好用
找了好几款基于jquery的模板渲染插件,无一感觉很难用(教程较少.绑定不统一),也可能我智商问题,比如jquery template.js .jtemplate.js. 然后在github上找到这一 ...
源码来袭！！！基于jquery的ajax分页插件（demo+源码）
前几天打开自己的博客园主页,发现自己的园龄竟然有4年之久了,没记错的话刚接触编程就知道了博客园,也就是说我入坑4年了?时光啊~.刚学习编程的时候最喜欢的就是来园子里听大神们吹牛逼,看着他们装逼就觉得很 ...
jQuery相当于对 javascript二次开发，所以基于 jQuery实现的各种插件直接调用即可...
jQuery相当于对 javascript二次开发,所以基于 jQuery实现的各种插件直接调用即可转载于:https://www.cnblogs.com/npk19195global/p/4482 ...
10 个非常酷的基于jQuery的菜单效果插件
除了直观的界面效果外,炫酷的网站导航菜单或右键菜单也能为访问者带来眼前一亮的感觉.本文为你带来10个非常酷的基于jQuery的菜单效果插件. 1. 右击菜单一个创建右击菜单的插件,简洁且易用. 源 ...
php星级评分,jQuery_基于jQuery的星级评分插件，首先看一下运行效果如下图所 - phpStudy...
基于jQuery的星级评分插件首先看一下运行效果如下图所示. 鼠标移到星星上该星星前面的所有星星全部变亮,鼠标单击将记录点击的星星数,前面的所有星星将变亮. 一.原理本程序的原理是这样的:一个&qu ...
10 款基于 jQuery 的切换效果插件推荐
本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...
发布基于jQuery的灯箱广告插件momoSlideShow
好久不写博客了,今天发布一个插件,这个插件是基于jQuery的插件,主要功能是轮流显示一系列的灯箱广告,该插件具有使用简单,体积小的特点(仅4k左右),界面截图如下: html: <div id ...

基于jQuery的弹窗小插件

基于jQuery的弹窗小插件相关推荐

最新文章

热门文章