hey-WindowAlert

版本:1.0

github源码

类型演示

默认消息提示 带关闭按钮 确认弹框 带表单的弹框 通用弹框

皮肤选择

默认皮肤,待更新...

使用说明

使用示例

1.文件引用

<link rel="stylesheet" href="css/window.css"> <script src="js/require.js" data-main="js/main"></script>

2.html部分

<a href="javascript:;" id="default">默认消息提示</a>

3.js调用

$('#default').click(function () { new w.Window().alert({}); });

4.配置选项

属性名 默认值 说明
width400弹框的宽度
min_height225弹框的最小高度
title系统消息弹框标题
content' '弹框内容
hasCloseBtnfalse是否有关闭按钮
hasMasktrue是否有遮罩层
skinClassNamenull皮肤名
isDraggabletrue是否可拖动
dragHandlenull可拖动的部分(class名),默认为整个弹框
text4AlertBtn确定alert弹框的按钮文字
text4ConfirmBtn确定confirm弹框的按钮文字
text4ConfirmBtn取消取消按钮文字
text4PromptBtn确定prompt按钮文字
isPromptInputPasswordfalse输入框是否为密码输入
defaultValue4PromptInput' 'prompt输入框的默认值
maxlength4PromptInput10prompt输入框的默认输入长度
handler4AlertBtnnullalert确定按钮的回调函数
handler4AlertBtnnullalert确定按钮的回调函数
handler4CloseBtnnull关闭按钮的回调函数
handler4ConfirmBtnnullconfirm确定按钮的回调函数
handler4CancelBtnnull取消按钮的回调函数
handler4PromptBtnnullprompt确定按钮的回调函数

5.回调函数用法示例

//单个绑定示例 $('#a').click(function(){ var win = new w.Window(); win.alert({ title:'提示', content: '内容', hasCloseBtn: true, handler4AlertBtn: function(){ alert('you click the alert button'); }, handler4CloseBtn: function(){ alert('you click the close button'); }, skinClassName: 'window_skin_a', text4AlertBtn: '保存', dragHandle: '.window_header' }); }); //多个绑定示例(用on) $('#a').click(function(){ var win = new w.Window(); win.alert({ title:'提示', content: '内容', hasCloseBtn: true, skinClassName: 'window_skin_a', text4AlertBtn: '保存', dragHandle: '.window_header' }); win.on('alert', function(){ alert('the second alert handler'); }).on('alert', function(){ alert('the third alert handler'); }).on('close', function(){ alert('the second close handler'); }); });
hey