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