jAlert是一款兼容ie8的jQuery模态对话框插件。jAlert可以实现模态对话框，弹出窗口，Lightbox 等，并且在显示对话框时带有炫酷的动画效果。
使用方法
在页面中引入jQuery和jAlert.js、jAlert.css文件。
<link rel="stylesheet" href="dist/jAlert.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jAlert.js"></script>
|
初始化插件
可以通过一个超链接来触发模态对话框。
<a href='#' data-jAlert data-title='New jAlert!' data-content='Great job!'>Click Me</a>
|
$(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'
});
|