基本信息
源码名称:jquery boxy 弹出层 例子源码
源码大小:0.11M
文件格式:.rar
开发语言:js
更新时间:2015-12-02
友情提示:(无需注册或充值,赞助后即可获取资源下载链接)
嘿,亲!知识可是无价之宝呢,但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下,绝对物超所值哦!如有下载和支付问题,请联系我们QQ(微信同号):813200300
本次赞助数额为: 2 元×
微信扫码支付:2 元
×
请留下您的邮箱,我们将在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>