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' });
该jQuery模态对话框插件的github地址为:https://github.com/VersatilityWerks/jAlert
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!