Web/Js/jquery.zxxbox.v3/demo/jquery-zxxbox-v3-demo.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="description" content="jQuery zxxbox弹出框插件(v3.0)测试页面" />
<meta name="description" content="张鑫旭web前端学习之jQuery zxxbox弹出框插件(v3.0)测试页面实例页面" />
<meta name="keywords" content="张鑫旭,鑫空间-鑫生活,博客,web前端,css,jQuery,demo页面,学习," />
<meta name="author" content="张鑫旭,zhangxixnu" />
<title>jQuery zxxbox弹出框插件(v3.0)测试页面 » 张鑫旭-鑫空间-鑫生活</title>
<link rel="stylesheet" href="../css/common.css" type="text/css" />
</head>
<body>
<div class="zxx_out_box">
    <div class="zxx_in_box">
        <div class="zxx_header">
            <a href="http://www.zhangxinxu.com/">
                <img class="l" src="http://www.zhangxinxu.com/wordpress/wp-content/themes/default/images/index_logo.gif" />
            </a>
            <span class="zxx_author_time">by zhangxinxu 2010-09-06 13:51</span>
        </div>
        <h1 class="zxx_title">jQuery zxxbox弹出框插件(v3.0)测试页面</h1>
        <div class="zxx_main_con">
			<div class="zxx_test_list">
            	<h3 class="mb10 f14">一、内置弹框</h3>
            	<p>显示最简单的内置的信息确定提示框：<button id="test1">点击我</button></p>
                <div class="zxx_code"><div class="mb10 f9"><strong>JS代码：</strong></div><xmp>$("#test1").click(function(){
    $.zxxbox.remind("你已成功受邀参加威尼斯电影节。");						   
});</xmp></div>
            </div>
            <div class="zxx_test_list">
            	<p>带回调函数的信息确认提示框：<button id="test2">点击我</button></p>
                <div class="zxx_code"><div class="mb10 f9"><strong>JS代码：</strong></div><xmp>$("#test2").click(function(){
    $.zxxbox.remind('美国驻沪领事馆权威发布：上半年<a href="#nogo" title="上海">上海</a>赴美留学3.2万人。', function(){
        alert("哇哈哈，这是回调函数显示的内容：今年上海的学生签证通过率达到了95%。去年这一数字为90%。");
    }, {
        title: "参考消息"	
    });						   
});	</xmp></div>
            </div> 
            <div class="zxx_test_list">
            	<p>显示内置的询问提示框：<button id="test3">点击我</button></p>
                <div class="zxx_code"><div class="mb10 f9"><strong>JS代码：</strong></div><xmp>$("#test3").click(function(){
    $.zxxbox.ask("确认改变页面的背景色为天蓝色", function(){
        $("body").css("background-color", "azure");	
        $.zxxbox.hide();
    }, null, {
        title: "友情提示"	
    });						   
});</xmp></div>
            </div>
            <div class="zxx_test_list">
            	<h3 class="mb10 f14">二、装载页面上的元素</h3>
                <p>加载页面上一段登录的HTML：<button id="test4">登录</button></p>
                <div class="zxx_code">
                	<div class="mb10 f9"><strong>HTML代码：</strong></div>
                    <xmp><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></xmp>