4种弹框
1、最基本的三种弹窗
alert，confirm，prompt
js三种弹窗
alert()
confirm(option)
prompt(option1,[option2])
2、lhgDialog弹窗提示窗口
lhgDialog是一个功能强大且兼容面广的对话框组件，它拥有精致的界面与友好的接口
兼容：IE6+、Firefox、Chrome、Safari、Opera以及iPad等移动设备。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件、alpha通道png背景。
LghDialog弹框
优雅
窗口lhgdialog.min.js文件的url参数
A 参数形式为：
self：指定弹出窗口的页面
类型：String
默认：'false'
说明：此参数只用在框架页面中，如果不写此参数或值为false时则窗口跨框架弹出在框架最顶层页面，如果值为true则不跨框架，而在当前面页弹出。
skin：多皮肤共享CSS文件名
类型：String
默认：'default'
说明：不写此参数则值为default。如果你想在同一页面使用不同皮肤的窗口，此处的值就为多皮肤共存的CSS的文件名
url参数不需要设定的就可以不写，不写时就使用默认值。
B 按钮相关
ok：确定按钮回调函数
类型：Function|Boolean
默认：null
说明：函数如果返回false将阻止对话框关闭；函数this指针指向内部api；如果传入true表示只显示有关闭功能的按钮
cancel：取消按钮回调函数
类型：Function|Boolean
默认：null
说明：1.函数如果返回false将阻止对话框关闭；函数this指针指向内部api；
2.如果传入true表示只显示有关闭功能的按钮，标题栏的关闭按钮其实就是取消按钮，点击同样触发cancel事件
3.如果值为false时则隐藏标题栏右边的关闭按钮
okVal：确定按钮文字
类型：String
默认：确定
cancelVal：取消按钮文字
类型：String
默认：取消
min：是否显示最小化按钮
类型：Boolean
默认：true
max：是否显示最大化按钮
类型：Boolean
默认：true
button：自定义按钮
类型：Array
默认：null
说明：
配置参数成员：
name —— 按钮名称
callback —— 按下后执行的函数
focus —— 是否聚焦点
disabled —— 是否标记按钮为不可用状态（后续可使用扩展方法让其恢复可用状态）
示例：
参数如：[{name: '登录', callback: function () {}}, {name: '取消'}] 。注意点击按钮默认会触发按钮关闭动作，需要阻止触发关闭请让回调函数返回false
C 尺寸相关
width：指定窗口的宽度
类型：Number|String
默认：'auto'
说明：1. 设置窗口的宽度，可以带单位。一般不需要设置此，对话框框架会自己适应内容
2.如果设置为百分值单位，将会以根据浏览器可视范围作为基准，此时如果浏览器窗口大小被改变其也会进行相应的调整
height：指定窗口的高度
类型：Number|String
默认：'auto'
说明：1.设置窗口的高度，可以带单位。
2.如果设置为百分值单位，将会以根据浏览器可视范围作为基准，此时如果浏览器窗口大小被改变其也会进行相应的调整
minWidth：最小宽度限制
类型：Number
默认：96
说明：此参数值只能为数字
minHeight：最小高度限制
类型：Number
默认：32
说明：此参数值只能为数字
D 位置相关
fixed：开启静止定位
类型：Boolean
默认：false
说明：静止定位是css2.1的一个属性，它静止在浏览器某个地方不动，也不受滚动条拖动影响
left：相对于可视区域的X轴的坐标
类型：Number|String
默认：'50%'
说明：可以使用'0%' ~ '100%'作为相对坐标，如果浏览器窗口大小被改变其也会进行相应的调整
top：相对于可视区域的Y轴的坐标
类型：Number|String
默认：'50%'
说明：可以使用'0%' ~ '100%'作为相对坐标，如果浏览器窗口大小被改变其也会进行相应的调整
E 交互相关
time：设置对话框显示时间
类型：Number
默认：null
说明：以秒为单位
resize：是否允许用户调节尺寸
类型：Boolean
默认：true
drag：是否允许用户拖动位置
类型：Boolean
默认：true
esc：是否允许用户按Esc键关闭对话框
类型：Boolean
默认：true
说明：只有窗口获得焦点后才能使用此功能
cache：是否缓存iframe方式加载的窗口内容页
类型：Boolean
默认：true
说明：只有使用iframe方式加载的单独页面的内容时此参数才有效
extendDrag：是否开启增强拖拽体验
类型：Boolean
默认：true
说明：1.此属性为全局性设置，不能在窗口调用的参数里设置，只能使用lhgdialog.setting.extendDrag来设置
2.防止鼠标落入iframe导致不流畅，对超大对话框拖动优化
F 视觉相关
lock：开启锁屏
类型：Boolean
默认：false
说明：中断用户对话框之外的交互，用于显示非常重要的操作/消息，所以不建议频繁使用它，它会让操作变得繁琐
background：锁屏遮罩颜色
类型：String
默认：'#FFF'
说明：请注意这是一个会影响到全局的配置，后续出现的对话框的遮罩颜色都和此设置一样，再设置不再起作用
opacity：锁屏遮罩透明度
类型：Number
默认：.5
说明：请注意这是一个会影响到全局的配置，后续出现的对话框的遮罩透明度都和此设置一样，再设置不再起作用
icon：定义消息图标
类型：String
默认：null
说明：可定义“skins/icons/”目录下的图标名作为参数名（一定要包含后缀名）
titleIcon：标题栏左边的小图标
类型：String
默认：null
说明：可定义“skins/icons/”目录下的图标名作为参数名（一定要包含后缀名）
padding：内容与边界填充边距(即css padding)
类型：String
默认：'15px 10px'
说明：如果内容页为iframe方式加载的则在css里需要设置为0，要不在IE6中易出问题
skin：多皮肤共存时指定的皮肤样式
类型：String
默认：''
说明：指定窗口要使用的皮肤的主类名
G 高级相关
id：设定对话框唯一标识
类型：String|Number
默认：null
说明：1.防止重复弹出
2.定义id后可以使用this.get(youID)和lhgdialog.list[youID]获取扩展方法
zIndex：重置全局zIndex初始值
类型：Number
默认：1976
说明：用来改变对话框叠加高度，请注意这是一个会影响到全局的配置，后续出现的对话框叠加高度将重新按此累加。
init：对话框弹出后执行的函数
类型：Function
默认：null
说明：如果是以iframe方式加载的内容页此函数会在内容页加载完成后执行
close：对话框关闭前执行的函数
类型：Function
默认：null
说明：函数如果返回false将阻止对话框关闭。请注意这不是关闭按钮的回调函数，无论何种方式关闭对话框，close都将执行。
parent：打开子窗口的父窗口对象
类型：Object
默认：null
说明：此参数只用在打开多层窗口都使用遮罩层时才会用到此参数，注意多层窗口锁屏时一定要加此参数
窗口实例对象内部方法
close()：关闭对话框
参数：无
说明：在需要关闭窗口时可调用此方法
reload(win,url)：刷新或跳转指定的页面
参数1：指定的要刷新或跳转的页面的window对象
参数2：要跳转到的页面地址
show()：显示对话框
参数：无
hide()：隐藏对话框
参数：无
title(value)：写入标题
参数1：标题的文本
说明：无参数则返回创建的窗口对象实例
content(value)：向窗口中写入内容
参数1：窗口中的内容
说明：如果参数的前3个字符为'url:'参使用iframe方式加载单独的内容页，无参数则返回创建的窗口对象实例
button(arguments)：插入一个自定义按钮
参数1：name -- 按钮名称
参数2：callback -- 按下后执行的函数
参数3：focus -- 是否聚焦点
参数4：disabled -- 是否标记按钮为不可用状态（后续可使用扩展方法让其恢复可用状态）
说明：此参数为多个对象
示例：
button({
name: '登录',
focus: true,
callback: function(){}
},{
name: '取消'
});
position(left,top)：重新定位对话框
参数1：X轴的坐标
参数2：Y轴的坐标
说明：参数可以为数字或带单位的字符如：'200px'或使用'0%' ~ '100%'作为相对坐标
size(width,height)：重新设定对话框大小
参数1：窗口的宽度
参数2：窗口的高度
说明：参数可以为数字或带单位的字符如：'200px'或使用'0%' ~ '100%'百分值单位
max()：最大化窗口
参数：无
min()：最小化窗口
参数：无
lock()：锁屏
参数：无
unlock()：解锁
参数：无
time(val,callback)：定时关闭（单位秒）
参数1：数值，以秒为单位
参数2：回调函数
说明：参数2为窗口关闭前执行的函数
focus() ：自动设置窗口中焦点元素
参数：无
zindex() ：置顶窗口
参数：无
get(id,object) ：根据指定id获取相应的对象
参数1：窗口的id
参数2：是否返回的是窗口实例对象
说明：参数2的值只有为数字1时才返回指定id的窗口的实例对象
api：内容页中调用窗口实例对象接口
说明：此对象属性是附加在iframe元素的一个属性，在iframe方式加载的内容页中通过调用此函数来获取窗口的实例对象，示例：var api = frameElement.api; 注：此句代码是加在iframe方式加载的内容页中的，一定要注意
opener：加载窗口组件页面的window对象
说明：此属性主要用在iframe方式加载的内容页中，示例：var api = frameElement.api, W = api.opener; 此时的W即为加载窗口组件页面的window对象
iframe：iframe方式加载内容的iframe对象
说明：此属性主要用于在窗口组件调用页面操作窗口中的iframe对象
iwin：iframe方式加载内容页的window对象
说明：此属性主要用于在窗口组件调用页面操作窗口中的window对象，示例：var dg = $.dialog({'url:content.html',init:function(){ if( this.iwin.document.body ) alert('窗口内容页加载完成'); });
窗口外部方法
$.dialog.focus：获取焦点的窗口实例对象
说明：可以使用此属性获取儿得焦点的窗口的对象，示例：var dg = $.dialog.focus; 此时的dg就是当前焦点窗口的对象实例
$.dialog.list：所有窗口对象实例的集合
说明：通过此属性可获取所有打开的窗口对象，示例：关闭页面所有对话框
var list = $.dialog.list;
for( var i in list ){
list[i].close();
}
$.dialog.top：获取lhgdialog可用最高层window对象
说明：这与直接使用window.top不同，它能排除url参数self为true时定义的顶层页面为调用窗口组件页面或者顶层页面为框架集的情况
$.dialog.data(name,value)：跨框架数据共享写入接口
参数1：存储的数据名
参数2：将要存储的任意数据(无此项则返回被查询的数据，如果此值为false就删除指定名称的数据)
说明：框架与框架之间以及与主页面之间进行数据交换是非常头疼的事情，常规情况下你必须知道框架的名称才能进行数据交换，如果是在复杂的多层框架下操作简直就是噩梦。
而data方法就是为了解决这个问题，你完全不用管框架层级问题，它可以写入任何类型的数据，而做到各个页面之间数据共享。
扩展的一些提示性的窗口
$.dialog.alert(content,callback)：警告消息
参数1：内容
参数2：窗口关闭时执行的回调函数
$.dialog.confirm(content,yes,no)：确认
参数1：内容
参数2：确定按钮回调函数
参数3：取消按钮回调函数
$.dialog.prompt(content,yes,value)：提问
参数1：内容
参数2：确定按钮回调函数
参数3：文本框默认值
$.dialog.tips(content,time,icon,callback)：短暂提示
参数1：内容
参数2：显示时间
参数3：提示图标
参数4：提示关闭时执行的函数
$.dialog.load(url,options,cache)：Ajax填充内容
参数1：地址
参数2：配置参数
参数3：是否允许缓存. 默认false
3 优化Jquery弹框
优化jQuery提示框
Fytx_Tips_Config.js
var _fytx_alert_bg = 0.3;
var _fytx_alert_bgcolor = "#000000";
var _fytx_alert_box_bgcolor = "#ffffff";
var _fytx_alert_title_color = "#333333";
var _fytx_alert_titleline_color = "#3475f5";
var _fytx_alert_message_color = "#333333";
var _fytx_alert_btn_color = "#ffffff";
var _fytx_alert_btn_bgcolor = "#3475f5";
var _fytx_confirm_bg = 0.3;
var _fytx_confirm_bgcolor = "#000000";
var _fytx_confirm_box_bgcolor = "#ffffff";
var _fytx_confirm_title_color = "#333333";
var _fytx_confirm_titleline_color = "#3475f5";
var _fytx_confirm_message_color = "#333333";
var _fytx_confirm_okbtn_color = "#ffffff";
var _fytx_confirm_okbtn_bgcolor = "#3475f5";
var _fytx_confirm_cancelbtn_color = "#333333";
var _fytx_confirm_cancelbtn_bgcolor = "#ffffff";
var _fytx_toast_bg = 0.3;
var _fytx_toast_bgcolor = "#000000";
var _fytx_toast_box_bg = 0.5;
var _fytx_toast_box_bgcolor = "#000000";
var _fytx_toast_color = "#ffffff";
var _fytx_toast_close = true;Fytx_Tips.css
@charset "UTF-8";
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0
}
.fytx_alert_background {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .3);
position: fixed;
top: 0;
left: 0;
z-index: 999999
}
.fytx_alert_background .fytx_alert_box {
width: 452px;
height: auto;
padding: 0 15px 20px;
box-sizing: border-box;
background: #fff;
border-radius: 8px;
position: relative;
top: 50%;
left: 50%;
margin: -167px 0 0 -226px
}
.fytx_alert_background .fytx_alert_title {
width: 100%;
height: 45px;
border-bottom: 1px solid #99bafa;
font-size: 16px;
color: #333;
line-height: 45px;
text-align: center
}
.fytx_alert_background .fytx_alert_message {
width: 100%;
height: auto;
overflow: hidden;
padding: 25px 40px 35px;
text-align: center;
font-size: 16px;
color: #333;
box-sizing: border-box;
line-height: 28px
}
.fytx_alert_background .fytx_alert_btn {
display: block;
width: 100px;
height: 34px;
line-height: 34px;
background-color: #3475f5;
cursor: pointer;
font-size: 14px;
color: #fff;
border-radius: 4px;
border: 1px solid transparent;
margin: 0 auto;
text-align: center
}
.fytx_confirm_background {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .3);
position: fixed;
top: 0;
left: 0;
z-index: 999999
}
.fytx_confirm_background .fytx_confirm_box {
width: 452px;
height: auto;
padding: 0 15px 20px;
box-sizing: border-box;
background: #fff;
border-radius: 8px;
position: relative;
top: 50%;
left: 50%;
margin: -167px 0 0 -226px
}
.fytx_confirm_background .fytx_confirm_title {
width: 100%;
height: 45px;
border-bottom: 1px solid #99bafa;
font-size: 16px;
color: #333;
line-height: 45px;
text-align: center
}
.fytx_confirm_background .fytx_confirm_message {
width: 100%;
height: auto;
overflow: hidden;
padding: 25px 40px 35px;
text-align: center;
font-size: 16px;
color: #333;
box-sizing: border-box;
line-height: 28px
}
.fytx_confirm_background .fytx_confirm_okbtn {
display: inline-block;
width: 100px;
height: 34px;
line-height: 34px;
background-color: #3475f5;
cursor: pointer;
font-size: 14px;
color: #fff;
border-radius: 4px;
border: 1px solid transparent;
text-align: center;
margin-left: 84px;
margin-right: 47px
}
.fytx_confirm_background .fytx_confirm_cancelbtn {
display: inline-block;
width: 100px;
height: 34px;
line-height: 34px;
background: fff;
cursor: pointer;
font-size: 14px;
color: #3475f5;
border-radius: 4px;
border: 1px solid transparent;
text-align: center;
border: 1px solid #3475f5
}
.fytx_toast_background {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .3);
position: fixed;
top: 0;
left: 0;
z-index: 999999
}
.fytx_toast_background .fytx_toast_box {
width: 452px;
height: auto;
cursor: pointer;
padding: 15px 20px;
text-align: center;
background: rgba(0, 0, 0, .5);
color: #fff;
font-size: 16px;
border-radius: 8px;
line-height: 24px;
position: relative;
top: 50%;
left: 50%;
margin: 0 0 0 -226px
}Fytx_Tips.js
var _fytx_toast_box = "";
var _fytx_toast_background = "";
var _fytx_toast_time = 0;
function Fytx_Tips() {
var _this = this;
_fytx_toast_background = $('');
_this.Fytx_alert = function(obj) {
if($("div").is(".fytx_alert_background")) $('.fytx_alert_background').remove();
var _fytx_alert_background = '' + '' + obj.title + '' + '' + '确定' + '';
$('body').append(_fytx_alert_background);
if(_fytx_alert_bg != "") {
var fytx_bgcolor = $.hextorgb(_fytx_alert_bgcolor);
$('.fytx_alert_background').css("background", "rgb(" + fytx_bgcolor + "," + _fytx_alert_bg + ")");
}
if(_fytx_alert_box_bgcolor != "") $('.fytx_alert_box').css("background-color", _fytx_alert_box_bgcolor);
if(_fytx_alert_title_color != "") $('.fytx_alert_title').css("color", _fytx_alert_title_color);
if(_fytx_alert_titleline_color != "") $('.fytx_alert_title').css("border-bottom", _fytx_alert_titleline_color + " 1px solid");
if(_fytx_alert_message_color != "") $('.fytx_alert_message').css("color", _fytx_alert_message_color);
if(_fytx_alert_btn_bgcolor != "") $('.fytx_alert_btn').css("background-color", _fytx_alert_btn_bgcolor);
if(_fytx_alert_btn_color != "") $('.fytx_alert_btn').css("color", _fytx_alert_btn_color);
}
_this.Fytx_confirm = function(obj) {
if($("div").is(".fytx_confirm_background")) $('.fytx_confirm_background').remove();
var _fytx_confirm_background = '' + obj.title + '确定取消';
$('body').append(_fytx_confirm_background);
if(_fytx_confirm_bg != "") {
var fytx_bgcolor = $.hextorgb(_fytx_confirm_bgcolor);
$('.fytx_confirm_background').css("background", "rgb(" + fytx_bgcolor + "," + _fytx_confirm_bg + ")");
}
if(_fytx_confirm_box_bgcolor != "") $('.fytx_confirm_box').css("background-color", _fytx_confirm_box_bgcolor);
if(_fytx_confirm_title_color != "") $('.fytx_confirm_title').css("color", _fytx_confirm_title_color);
if(_fytx_confirm_titleline_color != "") $('.fytx_confirm_title').css("border-bottom", _fytx_confirm_titleline_color + " 1px solid");
if(_fytx_confirm_message_color != "") $('.fytx_confirm_message').css("color", _fytx_confirm_message_color);
if(_fytx_confirm_okbtn_bgcolor != "") $('.fytx_confirm_okbtn').css("background-color", _fytx_confirm_okbtn_bgcolor);
if(_fytx_confirm_okbtn_color != "") $('.fytx_confirm_okbtn').css("color", _fytx_confirm_okbtn_color);
if(_fytx_confirm_cancelbtn_bgcolor != "") $('.fytx_confirm_cancelbtn').css("background-color", _fytx_confirm_cancelbtn_bgcolor);
if(_fytx_confirm_cancelbtn_color != "") $('.fytx_confirm_cancelbtn').css("color", _fytx_confirm_cancelbtn_color);
}, _this.Fytx_toast = function(mes, time) {
if(!_fytx_toast_background.is(':hidden')) _fytx_toast_box.remove();
_fytx_toast_box = $('' + mes + '');
_fytx_toast_background.append(_fytx_toast_box);
$('body').append(_fytx_toast_background);
_fytx_toast_box.css({
'marginTop': -_fytx_toast_box.outerHeight() / 2 + 'px'
});
if(_fytx_toast_bg != "") {
var fytx_bgcolor = $.hextorgb(_fytx_toast_bgcolor);
$('.fytx_toast_background').css("background", "rgb(" + fytx_bgcolor + "," + _fytx_toast_bg + ")");
}
if(_fytx_toast_box_bg != "") {
var fytx_bgcolors = $.hextorgb(_fytx_toast_box_bgcolor);
$('.fytx_toast_box').css("background", "rgb(" + fytx_bgcolors + "," + _fytx_toast_box_bg + ")");
}
if(_fytx_toast_color != "") $('.fytx_toast_box').css("color", _fytx_toast_color);
if(time > 0) {
var Etimer = null;
clearInterval(Etimer);
_fytx_toast_time = time;
Etimer = setInterval(function() {
_fytx_toast_time--;
if(_fytx_toast_time <= 0) {
clearInterval(Etimer);
_fytx_toast_background.remove();
_fytx_toast_box.remove();
}
}, 1000);
}
}, _this.Fytx_removetoast = function() {
_fytx_toast_background.remove();
_fytx_toast_box.remove();
}, $("body").on("click", ".fytx_toast_box", function() {
if(_fytx_toast_time > 0 && _fytx_toast_close) {
_fytx_toast_background.remove();
_fytx_toast_box.remove();
_fytx_toast_time = 0;
}
});
}
$(document).ready(function() {
var _fytx_confirm_isokstr = "";
var _fytx_confirm_iscancelstr = "";
var Fytx = new Fytx_Tips();
$.alert = function(title, msg) {
Fytx.Fytx_alert({
title: title,
message: msg
})
}, $("body").on("click", ".fytx_alert_btn", function() {
$(".fytx_alert_background").hide();
});
$.confirm = function(title, msg, isokstr, iscancelstr) {
_fytx_confirm_isokstr = arguments[2] ? arguments[2] : "";
_fytx_confirm_iscancelstr = arguments[3] ? arguments[3] : "";
Fytx.Fytx_confirm({
title: title,
message: msg
});
}, $("body").on("click", ".fytx_confirm_okbtn", function() {
$(".fytx_confirm_background").hide();
if(typeof $.isok === "function") {
if(_fytx_confirm_isokstr == "") {
$.isok();
} else {
$.isok(_fytx_confirm_isokstr);
}
}
});
$("body").on("click", ".fytx_confirm_cancelbtn", function() {
$(".fytx_confirm_background").hide();
if(typeof $.iscancel === "function") {
if(_fytx_confirm_iscancelstr == "") {
$.iscancel();
} else {
$.iscancel(_fytx_confirm_iscancelstr);
}
}
});
$.toast = function(msg, time, state) {
time = arguments[1] ? arguments[1] : ((arguments[1] == 0) ? 0 : 3);
state = arguments[2] ? arguments[2] : ((arguments[2] == 0) ? 0 : undefined);
if(state != undefined) {
if(state == 1) {
_fytx_toast_close = true;
} else if(state == 0) {
_fytx_toast_close = false;
} else {
_fytx_toast_close = state;
}
}
Fytx.Fytx_toast(msg, time);
}, $.removetoast = function() {
Fytx.Fytx_removetoast();
}
$.hextorgb = function(str) {
if(str != "") {
str = str.replace("#", "");
if(str.length == 3) str = str.substr(0, 1) + str.substr(0, 1) + str.substr(1, 1) + str.substr(1, 1) + str.substr(2, 1) + str.substr(2, 1);
var hex = str.match(/../g);
for(var i = 0; i < 3; i++) hex[i] = parseInt(hex[i], 16);
return hex;
} else {
return "0,0,0";
}
}
});4 layer一个让你想到即可做到的Web弹窗
《layer》
Layer
- 望着天下起了雪
- 满天的雪花是那么浪漫
- 对你的爱就像那片雪花
- 散落一地
初体验
皮肤
询问
提示
切换风格
捕获
页面
自定义
吸附tips
url其他页面
url其他窗
正在加载
加载中....
小tips
prompt层
tab标签
提示信息
demo1
demo2
demo3
demo4
demo5
加载中
demo1
demo2
demo3
demo4
demo5
弹窗设置
无限弹窗
透明询问框
【PS：每个按钮，这里就不点了，自己点去吧】