基本信息
源码名称:jquery boxy 弹出层 例子源码
源码大小:0.11M
文件格式:.rar
开发语言:js
更新时间:2015-12-02
   友情提示:(无需注册或充值,赞助后即可获取资源下载链接)

     嘿,亲!知识可是无价之宝呢,但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下,绝对物超所值哦!如有下载和支付问题,请联系我们QQ(微信同号):813200300

本次赞助数额为: 2 元 
   源码介绍

<!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>
    <title></title>

    <script src="jquery-1.5.js" type="text/javascript"></script>

    <script src="jquery.boxy.js" type="text/javascript"></script>

    <link href="boxy.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $(function() {
            $(".boxy").boxy();

            $("#a1").click(function() {
                var box1 = new Boxy("<h3>这个参数是显示的内容</h3>",
                {
                    title: "标题", //对话框标题
                    modal: false, //是否为模式窗口
                    afterHide: function(e) { alert("dialog hide"); }, //隐藏时的回调函数
                    afterShow: function(e) { alert("dialog show"); }, //显示时的回调函数
                    closeText: "X",   //关闭功能按钮的标题文字
                    draggable: true //是否可以拖动
                });
                box1.resize(300, 100);  //设置对话框的大小
            });

            //提问框
            $("#a2").click(function() {
                Boxy.ask("凤姐最漂亮的部分是?",  //问题
                ["脸皮", "小嘴巴", "知识渊博"], //可选按钮
                function(val) { alert(val) }, //回调方法
                {title: "测试", modal: false}   //boxy属性设置
                );
            });

            //警告框
            $("#a3").click(function() {
                Boxy.alert("这是警告信息",   //提示信息
                function(val) { alert(val); },   //回调方法
                {title: "提示" });  //boxy属性
            });

            //确认框
            $("#a4").click(function() {
                Boxy.confirm("你确认要看凤姐的照片吗?", //确认提示信息
                function() { alert("上当了") },  //点击确认后的回调信息
                {title: "测试", modal: false });   //boxy属性设置
            });

        });
    </script>

    <style type="text/css">
        body
        {
            background: url(Summer_B_2.jpg);
        }
        a
        {
            color: #fff;
        }
    </style>
</head>
<body>
    <p>
        <a href="#m1" class="boxy" title="这是超链接的标题">3.1、点我就会弹出一个对话框</a>
        <div id="m1" style="display: none">
            我是超链接弹出来的</div>
    </p>
    <p>
        <a href="Default.html" class="boxy" title="提示">3.2、加载一个文档,显示为提示信息</a>
    </p>
    <p>
        <form class="boxy" action="Default.html" method="get">
        <input id="Submit1" type="submit" value="3.3、提交时显示弹出层" />
        </form>
    </p>
    <p>
        <a href="#" id="a1">4.1、手动创建一个实例</a>
    </p>
    <p>
        <a href="#" id="a2">5.1、弹出提问框</a>
    </p>
    <p>
        <a href="#" id="a3">5.2、警告框</a>
    </p>
    <p>
        <a href="#" id="a4">5.3、确认框</a>
    </p>
</body>
</html>