一、内置弹框
显示最简单的内置的信息确定提示框：
JS代码：
<![CDATA[$("#test1").click(function(){
$.zxxbox.remind("你已成功受邀参加威尼斯电影节。");
});]]>
带回调函数的信息确认提示框：
JS代码：
<![CDATA[$("#test2").click(function(){
$.zxxbox.remind('美国驻沪领事馆权威发布：上半年<a href="#nogo" title="上海">上海</a>赴美留学3.2万人。', function(){
alert("哇哈哈，这是回调函数显示的内容：今年上海的学生签证通过率达到了95%。去年这一数字为90%。");
}, {
title: "参考消息"
});
}); ]]>
显示内置的询问提示框：
JS代码：
<![CDATA[$("#test3").click(function(){
$.zxxbox.ask("确认改变页面的背景色为天蓝色", function(){
$("body").css("background-color", "azure");
$.zxxbox.hide();
}, null, {
title: "友情提示"
});
});]]>
二、装载页面上的元素
加载页面上一段登录的HTML：
HTML代码：
<![CDATA[<div id="login" style="padding:40px; display:none;">
<p>用户名：<input id="unseName" type="text" size="20" /></p>
<p class="mt10 mb10">密&nbsp;&nbsp;码：<input type="text" size="20" /></p>
<p><button id="loginBtn">登录</button><button id="cancelBtn">取消</button></p>
</div>]]>
JS代码：
$("#test4").click(function(){ $("#login").zxxbox(); //或者是$.zxxbox($("#login")); });
$("#loginBtn").click(function(){ /*
*
一些登录操作
*
*/ alert("登录成功！");
$.zxxbox.hide();
});
$("#cancelBtn").click(function(){
$.zxxbox.hide();
});
使用a标签的锚点加载页面元素：点击我-登录
HTML代码：
<![CDATA[<a id="test5" href="#login">点击我-登录</a>]]>
JS代码：
$("#test5").zxxbox();
a标签本身作为元素被加载：点击我-被装载到弹框
HTML代码：
<![CDATA[<a href="#" class="ml10 mr10" id="test6">点击我-被装载到弹框</a>]]>
JS代码：
$("#test6").click(function(){
$(this).zxxbox({
ajaxTagA: false,
height: 80
});
return false;
});
三、Ajax装载页面外的元素
a标签链接地址加载之图片：点击我-显示美女图片
HTML代码：
<![CDATA[<a id="test7" target="_blank" href="http://image.zhangxinxu.com/image/study/s/s512/mm19.jpg">点击我-显示美女图片</a>]]>
JS代码：
$("#test7").zxxbox({
bar: false,
bgclose: true
});
a标签之加载静态页面：点击我-加载HTML静态页
HTML代码：
<![CDATA[<a id="test8" href="html-load.html">点击我-加载HTML静态页</a>]]>
JS代码：
$("#test8").zxxbox();
直接使用zxxbox的ajax方法加载外部数据：
JS代码：
$("#test9").click(function(){
$.zxxbox.ajax("php-load.php");
});
四、zxxbox一些参数使用举例
不显示半透明背景层：
JS代码：
<![CDATA[$("#test10").click(function(){
$.zxxbox('<div class="wrap_remind">最近貌似《盗梦空间》很热啊！</div>', {
bg: false
});
});]]>
不显示标题栏的关闭按钮：
JS代码：
$("#test11").click(function(){
$.zxxbox.remind("外滩，一对恋人，女撒娇道:亲爱的，听说过一阵要上映一个特别浪漫的电影，狄仁杰与山楂树之恋...",
function(){ //$(this)指代当前弹框的确定按钮jQuery对象
//禁用确定按钮 $(this).attr("disabled", "disabled");
}, {
btnclose: false
});
});
弹框可拖拽：
JS代码：
$("#test12").click(function(){
$.zxxbox.remind("点击按住标题栏可以进行拖拽~~", null, { drag: true });
});
弹框位置不随滚动条滚动（IE6有晃动）：
JS代码：
$("#test13").click(function(){
$.zxxbox.remind("弹框的位置游离于滚动条之外~~", null, { fix: true });
});
弹窗打开后定时关闭：
JS代码：
$("#test14").click(function(){
$.zxxbox.remind("此弹框将在3秒钟后关闭，现在倒计时3,2,1...", null, { delay: 3000 });
});
弹窗关闭后触发回调方法：
JS代码：
$("#test15").click(function(){
$.zxxbox.remind(
"此弹窗关闭后，页面会刷新~~",
null,
{
onclose: function(){
window.location.href=window.location.href;
}
});
});
五、一些复杂情况使用举例
弹框高度会动态增加：
<![CDATA[$("#test16").click(function(){
var elements = $('<div style="width:400px; padding:20px; display:none;">与70后相比，即将步入30岁的80后大多工作还不够稳定，房子、车子似乎也是很遥远的事情，而且，这其中还有为数可观的大龄青年。在变革的社会中成长起来的80后承担着更多来自现实和心理上的双重压力。迈入而立之年的80后，自己的前方在哪里？自己又能因何而立？<br /><a id="showRelElement" href="javascript:void(0);" rel="beRelElement">显示更多>></a><div id="beRelElement" class="mt10 dn">恐怕，就连孔子也不会想到，2000多年前组合出的4个字——“三十而立”，如今会因为一个叫“80后”的群体，再度引发国人的集体思考。<br /><br />三十而立，那么，何为“立”？最通俗惯常的说法，30岁应该成家立业，有所作为。而最低的要求则是30岁的人应该能依靠自己的本领，独立承担责任，并已确定自己的人生目标与发展方向。</div></div>');
$.zxxbox(elements, {
onshow: function() {
protect: false,
$("#showRelElement").click(function() {
var rel = $(this).attr("rel");
if (rel) {
$("#"+rel).slideDown(function() {
$.zxxbox.setPosition(true);
});
$(this).hide();
}
return false;
});
}
});
});]]>
多a标签加载外部元素（如图片）： 加载图片1 加载图片2 加载图片3
HTML代码：
<![CDATA[<a class="loadImage" href="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg">加载图片1</a>
<a class="loadImage ml10" href="http://image.zhangxinxu.com/image/study/s/s512/mm2.jpg">加载图片2</a>
<a class="loadImage ml10" href="http://image.zhangxinxu.com/image/study/s/s512/mm3.jpg">加载图片3</a>]]>
JS代码：
$(".loadImage").zxxbox({
bar: false,
bgclose:true
});
加载iframe并通过iframe内元素关闭弹框：
父页面HTML代码(隐藏的按钮)：
<![CDATA[<input id="forTriggerHide" type="button" class="dn" />]]>
JS代码：
$("#test17").click(function(){
$.zxxbox($('<iframe frameborder="0" width="400" height="200" src="iframe-load.html"></iframe>'));
});
$("#forTriggerHide").click(function(){
$.zxxbox.hide();
});
iframe框架页面相关HTML代码：
<![CDATA[<input id="forTriggerHide" type="button" class="dn" />]]>
JS代码：
document.getElementById("iframeBtn").onclick = function(){
parent.document.getElementById("forTriggerHide").click();
};
本站资源仅限于学习研究，严禁从事商业或者非法活动!
源码搜藏网所有源码来自互联网转载与用户上传分享，如果侵犯了您的权益请与我们联系，我们将在24小时内删除！谢谢！
一款把 CSS3 动画整合到按钮中jQuery插件
