jAlert是一款功能强大的可以制作模态对话框、消息框、Lightbox的jQuery插件。这是第3个版本,在这个版本中集成了animate.css,大大提升了弹出对话框的动画效果。它的特点有:
- 响应式设计
- 替换了默认的警告框,提示框,确认框
- 6种预定义尺寸和主题样式
- 支持AJAX,图片,iframe和视频
安装
使用jAlert插件要引入jQuery和jAlert-v3.css,以及jAlert-v3.min.js和jAlert-functions.min.js文件。
<link rel="stylesheet" href="jAlert-master/src/jAlert-v3.css"> <script src="js/jquery.min.js"></script> <script src="jAlert-master/src/jAlert-v3.min.js"></script> <script src="jAlert-master/src/jAlert-functions.min.js"></script> <!-- COMPLETELY OPTIONAL -->
使用方法
基本使用方法
下面的使用方法需要引入jAlert-functions.js文件。
// default alert popup alert('Hello World!'); // success successAlert('Success', 'Hello World!'); // error errorAlert('Error', 'Hello World!'); // info infoAlert('Info', 'Hello World!'); // warning warningAlert('Warning', 'Hello World!'); // black warning blackAlert('Warning', 'Hello World!'); // image lightbox imageAlert('1.jpg'); // video lightbox videoAlert('http://youtube.com/...'); // ajax lightbox ajaxAlert('external.html'); // iframe lightbox iframeAlert('http://www.htmleaf.com');
confirm(function(){ console.log('confirmed!'); }, function(){ console.log('denied'); });
默认使用方法
以下的使用方法是jAlert默认的使用方法,不需要jAlert-functions.js文件。
$.jAlert({ //this is the normal usage 'title': 'Test', 'content': 'Howdy', 'theme': 'green', 'size': 'xsm' });
$.fn.jAlert.defaults.backgroundColor = 'white'; //override a default setting $.fn.jAlert({ //same as $.jAlert when you're not passing an element - this alert will now have the white background color 'title': 'Test', 'content': 'Howdy', 'theme': 'green', 'size': 'xsm' //'backgroundColor': 'white' //you could also pass it here }); $.fn.jAlert.defaults.backgroundColor = 'black'; //set it back to black
$('.btn').alertOnClick({ //this function attaches an onclick handler to .btn and passes the options to jAlert 'title': 'It worked!', 'content': 'You clicked the button' });
$.alertOnClick('.btn', { //this function attaches an onclick handler to the body for .btn and kicks off jAlert 'title': 'Like magic', 'content': 'You clicked the button that was dynamically added' });
$.jAlert({ //creates a lightbox for the image - responsive and all 'image': 'http://mysite.com/my-image.jpg' });
$.jAlert({ //creates a lightbox for the video - responsive and all 'video': 'http://youtube.com/dflskd' });
$.jAlert({ //creates an alert that fills most of the height with a scrollable iframe 'iframe': 'http://www.htmleaf.com' });
$.jAlert({ //gets content from another file with $.get() 'ajax': 'my-ajax-content.php' });
配置参数
下面是jAlert的默认配置参数。
-
title
:弹出窗口的标题,默认为false
,即不带标题。 -
content
:弹出窗口的内容。默认值为false
。如果使用图片,ajax或iframe的话会替换这些内容。 -
image
:添加一个居中的图片标签。默认值为false
。 -
imageWidth
:默认的图片宽度。默认值max-width: 100%; width: auto;
。 -
video
:添加一个响应式的iframe视频。默认值false
。 -
ajax
:使用ajax回调获取内容。默认值为false
。 -
onAjaxFail
:ajax调用失败时的回调函数。function(alert, errorThrown){ alert.closeAlert(); errorAlert(errorThrown); }
-
iframe
:使用iframe作为内容。默认值false
。 -
iframeHeight
:弹出窗口中的iframe的高度。默认值为false
,表示视口高度的90%。 -
class
:为jAlert添加一个class,默认值为''
。 -
classes
:为jAlert添加多个class,用空格隔开。默认值为''
。 -
id
为jAlert添加一个ID,默认值为''
。 -
showAnimation
:弹出窗口显示时的animate.css动画。默认值'bounceIn'
。 -
hideAnimation
:弹出窗口隐藏时的animate.css动画。默认值'bounceOut'
。 -
animationTimeout
:动画到窗口关闭的持续时间。默认值600。 -
theme
。弹出窗口的主题。默认值:default。可选值:red, green, blue, black, default -
backgroundColor
:背景颜色。默认值'black'
。可选项:white, black。 -
size
:弹出窗口的尺寸。默认值false
。表示默认的css样式尺寸。可选值:xsm, sm, md, lg, xlg, full, { height: 200, width: 200 }。 -
replaceOtherAlerts
:是否在打开一个jAlert之前先关闭已经存在的jAlert窗口。默认值false
。 -
closeOnClick
:是否在点击任意地方时关闭弹出窗口。默认值false
。 -
closeOnEsc
:是否在按ESC键时改变弹出窗口。默认值true
。 -
closeBtn
:在弹出窗口的右上角添加关闭按钮。默认值true
。 -
closeBtnAlt
:替代关闭按钮。默认值false
。 -
btns
:在弹出窗口底部添加按钮。默认值false
。添加方法如下:'btns': [ {'text':'Open in new window', 'closeAlert':false, 'href': 'https://www.baidu.com', 'target':'_new'}, {'text':'Cool, close this alert', 'theme': 'blue', 'closeAlert':true}, {'text':'Buy Now', 'closeAlert':true, 'theme': 'green', 'onClick': function(){ console.log('You bought it!'); } }, {'text':'I do not want it', 'closeAlert': true, 'theme': 'red', 'onClick': function(){ console.log('Did not want it'); } }, {'text':'DOA', 'closeAlert': true, 'theme': 'black', 'onClick': function(){ console.log('Dead on arrival'); } } ]
-
btnBackground
:为按钮添加背景色。默认值true
。 -
autofocus
:传入一个选择器会自动聚焦在该元素上。默认值false
。 -
onOpen
:弹出窗口打开时的回调函数。 -
onClose
:弹出窗口关闭时的回调函数。 -
type
:弹出窗口的类型。默认值modal
,可选值:modal, confirm, tooltip。
下面的参数仅在type == 'confirm'
时可用。
'confirmQuestion': 'Are you sure?', 'confirmBtnText': 'Yes', 'denyBtnText': 'No', 'confirmAutofocus': '.confirmBtn', //confirmBtn or denyBtn 'onConfirm': function(e, btn){ e.preventDefault(); console.log('confirmed'); return false; }, 'onDeny': function(e, btn){ e.preventDefault(); //console.log('denied'); return false; }
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!