使用jq制作轻量的弹出窗口效果


插件描述: 国外强大的轻量级jQuery弹出框弹出层插件Zebra_Dialog,基于jQuery,非常漂亮的外观,跨浏览 器支持,强大的定制功能,5种基础弹出框支持:confirm确认框、信息提示框、警告框、错误框、 问题框。支持Ajax以及Iframe加载页面、支持HTML内容、支持按钮定制、支持指定位置弹出显示、 函数Callback,浏览器兼容性方面:Firefox, Opera, Safari, Chrome, Internet Explorer 6+, 效果真的不错,推荐使用。

使用方法: 1.加载jQuery和插件

 <script type="text/javascript" src="path/to/jQuery.js"></script><script type="text/javascript" src="path/to/zebra_dialog.js"></script><link rel="stylesheet" href="path/to/zebra_dialog.css" type="text/css">

2.函数调用

 <script>$(document).ready(function() {   //普通信息提示    $(anchor).bind('click', function(e) {        $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly' + 'configurable dialog box plugin for jQuery');    });    //指定显示类型    $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly' +    'configurable dialog box plugin for jQuery', {    'type':     'error',    'title':    'Error'     });    //指定位置显示    $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly' +    'configurable dialog box plugin for jQuery', {    'title':    'Custom positioning',    'position': ['right - 20', 'top + 20']    });    //弹出iframe页面    $.Zebra_Dialog('<strong>Content loaded via AJAX:</strong>', {    source: {'iframe': {'src':  'http://en.m.wikipedia.org/wiki/Dialog_box','height': 500    }},    width: 800,    title:  'External content loaded in an iFrame'    }); });</script>

注意:所有网页特效均为互联网上收集,若有侵权,请告知删除。

关键词:

© 版权声明
THE END
喜欢就支持一下吧
点赞11 分享