by zhangxinxu 2010-03-21 00:48

jQuery zxxbox弹出框插件测试页面

显示默认的问答提示框:

JS代码:
$("#test1").click(function(){ $(this).zxxbox({ ask: true, bg: false, drag: true }); });

显示自定义内容的提示框:

JS代码:
$("#test2").click(function(){ $(this).zxxbox({ fix: true, remind: true, remindtext: "我们少了点什么,我们到底怕什么,明明不想错过,只不过把话说出口……" }); });

装载一段特定的HTML内容:

HTML代码:
<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代码:
$("#test3").click(function(){ $("#login").zxxbox(); }); $("#loginBtn").click(function(){ alert("登录成功!"); $("#login").zxxbox({delay: 10}); });

装载图片:

HTML代码:
<img id="testImg" class="dn" src="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
JS代码:
$("#test4").click(function(){ $("#testImg").zxxbox({ bar: false }); });