html5+alert插件,jQuery模态对话框插件jAlert

jAlert是一款兼容ie8的jQuery模态对话框插件。jAlert可以实现模态对话框，弹出窗口，Lightbox 等，并且在显示对话框时带有炫酷的动画效果。

使用方法

在页面中引入jQuery和jAlert.js、jAlert.css文件。

初始化插件

可以通过一个超链接来触发模态对话框。

Click Me

$(function(){

$.jAlert('attach');

});

如果你不使用jAlert-functions.js，可以安装下面的方法来使用。

$.jAlert({ //this is the normal usage

'title': 'Test',

'content': 'Howdy',

'theme': 'green',

'size': 'xsm'

});

如果你添加了jAlert-functions.js文件，可以简单的通过下面的方法实现一个对话框。

alert('hi'); //override is enabled by default

你还可以使用下面的方法来实现各种主题效果。

successAlert('Success', 'You did it!'); //green alert

errorAlert('Error', 'It didn\'t work!'); //red alert

infoAlert('Info', 'Information!'); //blue alert

warningAlert('Warning', 'Warning!'); //yellow alert

blackAlert('Warning', 'Warning!'); //black alert (obviously)

imageAlert('http://mydomain.com/myimg.jpg'); //optional second param is the image width (defaults to auto)

videoAlert('http://youtube.com/viddk35k');

ajaxAlert('http://mydomain.com/myfile.php'); //optional second param is onOpen callback which gets passed the instance of jAlert

iframeAlert('http://mydomain.com'); //optional second param is height (defaults to fill the viewport height)

confirm(function(){

console.log('confirmed!');

}, function(){

console.log('denied');

});

$.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://mysite.com'

});

$.jAlert({ //gets content from another file with $.get()

'ajax': 'my-ajax-content.php'

});