【jquery body 高度】JQuery.Boxy 弹出层的实例

更新时间:2017-04-15    来源:jquery    手机版     字体:

【www.bbyears.com--jquery】

 代码如下




   

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

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

   

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

            $("#a1").click(function() {
                var box1 = new Boxy("

这个参数是显示的内容

",
                {
                    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>

   


   


        3.1、点我就会弹出一个对话框
       
            我是超链接弹出来的
   


   


        3.2、加载一个文档,显示为提示信息
   


   


       


       
       

   


   


        4.1、手动创建一个实例
   


   


        5.1、弹出提问框
   


   


        5.2、警告框
   


   


        5.3、确认框
   



Boxy是一个基于JQuery的弹出层插件,它有相对漂亮的外观,功能齐全,支持iframe,支持模式窗口但相对于同样的弹出层插件BlockUI它明显笨重,但使用不那么方便。

 

本文来源:http://www.bbyears.com/wangyezhizuo/31919.html

猜你感兴趣