html选择按键点击后锁死输入框_4种弹框-13469739-51CTO博客

1、最基本的三种弹窗

alert，confirm，prompt

js三种弹窗

alert()

confirm(option)

prompt(option1,[option2])

function doson(num){

if(num == 1){

alert("这是一Alert");

}else if( num == 2){

//返回一个布尔值，点击确定返回true,点击取消返回false

var isbeauty = confirm("准备好，游山玩水了吗？");

if(isbeauty){

alert("OK， Let's Go now !");

}else{

alert("不再考虑考虑了");

}

}else{

//option1：数据类型是字符串；是弹框里的提示文字。

//option2：数据类型是字符串；是弹框里输入框的value预留值,第二个参数为空时，弹框输入框中的值为空。

//返回一个输入框的内容

var tess = prompt("当山峰没有棱角的时候，你就开始好吗？");

alert(tess);

}

}

2、lhgDialog弹窗提示窗口

lhgDialog是一个功能强大且兼容面广的对话框组件，它拥有精致的界面与友好的接口

兼容：IE6+、Firefox、Chrome、Safari、Opera以及iPad等移动设备。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件、alpha通道png背景。

LghDialog弹框

优雅

//具体方法

function lghdialog(){

var dialog = $.dialog({

title: '欢迎',

content: '欢迎使用lhgdialog对话框组件！',

icon: 'success.gif',

ok: function(){

this.title('警告').content('请注意lhgdialog两秒后将关闭！').lock().time(2);

return false;

}

});

}

窗口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：对话框关闭前执行的函数

类型：Functio