上次需要做一个，点击一个控件弹出一个层，就相当于一个对话框，想着自己js写太麻烦了，于是在网上找相应的js代码，不过不过不负有心人，找到了一个jquery插件，虽然没有觉得以前早就觉得比js方便多了，但是还是没有去学习，很少用，不过慢慢的觉得它的魅力也慢慢的展现出来了...
好的，我们还是一样 先引入 对插件的支持:
例如：
<srcipt type="text/javascript" src="js/jquery.boxy.js"></srcipt>
另外我们还得加几个文件也是这个插件里面自带的，是为了显示出所弹出的这个对话框的样式，
<link type="text/css" rel="stylesheet" href="css/boxy.css"/>
[1]boxy-ne.png
[2]boxy-nw.png
[3]boxy-se.png
[4]boxy-sw.png
这四个小图片是显示在弹出框的四个角的。
另外能要正常应用该图片还需要去修改css图片的路径
/* Border */
.boxy-wrapper{empty-cells:show;}
.boxy-wrapper .top-left,.boxy-wrapper .top-right,.boxy-wrapper .bottom-right,.boxy-wrapper .bottom-left{width:10px; height:10px; padding:0}
.boxy-wrapper .top-left{background:url('../images/boxy/boxy-nw.png');}
.boxy-wrapper .top-right{background:url('../images/boxy/boxy-ne.png');}
.boxy-wrapper .bottom-right{background:url('../images/boxy/boxy-se.png');}
.boxy-wrapper .bottom-left{background:url('../images/boxy/boxy-sw.png');}
/* IE6+7 hacks for the border. IE7 should support this natively but fails in conjuction with modal blackout bg. */
/* NB:these must be absolute paths or URLs to your images */
.boxy-wrapper .top-left{#background:none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/boxy/boxy-nw.png');}
.boxy-wrapper .top-right{#background:none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/boxy/boxy-ne.png');}
.boxy-wrapper .bottom-right{#background:none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/boxy/boxy-se.png');}
.boxy-wrapper .bottom-left{#background:none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/boxy/boxy-sw.png');}
另外如果是用jsp引用该插件，那么一定要用w3c标准了，就是必须在页面前端加上
<!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">
如果不加上面的话，ie显示会有问题...
下面就写几个常用的方法：
1.Boxy.alert("内容",动作);
$('al').click(function(){
Boxy.alert("警告了!",function(){
alert('colse');
});
return false;
});
2.Boxy.confirm("内容",动作,{参数1:"",参数2:});
$('al').click(function() {
Boxy.confirm("Please confirm?", function() { alert("Confirmed!"); },{title:"测试"});
return false;
});
3.自定义对话框
$('#al').click(function() {
new Boxy("<div><a href='#'>内容，这次我放的是地图</a>",
{
title:"你好", //标题
closeText:"[关闭]", //关闭文字
modal:true, //背景是否变暗
fixed:true, //窗口是否固定
cache:true, //是否被遮挡
draggable:true, //这个设定窗口是否可以拖动，要定义title才有效，设定了modal就无效
center:true, //弹出对话框是否居中
x:50,
y:50, //设定窗口位置值为％多少，设定此后center会被覆盖
afterDrop:function(){}, //关闭对话框后执行的｛IE下面关闭不了,原因不明｝
afterShow:function(){}, //打开对话框后执行的
afterHide:function(){} //隐藏对话框后执行的
});
return false;
});
以下还有一些方法,属性，已经css的样式解释，这里就不写了，以后自己去慢慢了解.
分享到：
相关推荐
而"boxy-0.1.4"文件可能包含的是插件的源代码和必要的资源文件，例如CSS样式表和图片资源。 为了在项目中使用Boxy，开发者需要按照以下步骤操作： 1. **引入jQuery库**：首先，确保项目中已经引入了jQuery，因为...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了JavaScript的使用，尤其是在处理DOM操作、事件处理...学习和掌握Boxy不仅有助于提高前端开发技能，还能在实际项目中快速实现高效、优雅的弹框效果。
jQuery_boxy是一款流行的弹出层对话框插件，广泛应用于SNS社区型网站，如开心网、人人网和Facebook。该插件能够创建模态或非模态的弹出对话框，功能包括提示、确认、拖动、改变大小以及Ajax数据加载。由于网上缺乏...
在IT领域，jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。Boxy是一款基于jQuery的...对于想要深入学习前端交互和jQuery插件开发的人员来说，Boxy无疑是一个值得研究的实例。
无论是对于前端新手还是资深开发者，这份中文演示及讲解文档都是一份宝贵的资源，它不仅简化了学习过程，还极大地扩展了**boxy**插件的应用范围。在掌握了**boxy**的核心功能和API之后，开发者可以更加自信地在自己...
3. `jquery-plugin-boxy.zip`: 这个文件很可能包含了一个jQuery插件——Boxy。Boxy是一个对话框插件，它提供了弹窗功能，可以用于提示、确认或展示详细信息。学习这个插件的使用，可以提升你对jQuery扩展和插件开发...
本文将深入探讨几种常见的JS弹出层对话框和菜单样式，并结合提供的压缩包文件，如`MenuTree.rar`、`demo.zip`、`jquery-plugin-boxy`和`Dialog`，来解析实现这些功能的技术细节。 首先，让我们了解JS弹出层对话框。...
8. `boxy-ne.png` 和 `boxy-sw.png`：这些可能是弹出层角落的图像，用于创建圆角效果，使得弹出层更美观。 实现jQuery弹出层的关键在于使用jQuery选择器定位元素，然后应用`show()`、`hide()`、`fadeIn()`、`...
jQuery库提供了丰富的插件来实现这一功能，其中“boxy”是一个受欢迎的选择。在本篇中，我们将深入探讨jQuery模态对话框的基本概念、boxy插件的使用以及如何创建和定制自己的模态对话框。 ### jQuery模态对话框基础...
Web网页聊天室，jQuery随机皮肤特效聊天，聊天时可添加表情和魔法表情，还可发送音乐、发送Flash、发送图片等，可以站外邀请，可以指定陌生人等，本聊天室代码较完整，用到了不少的Flash技术，用到了jquery.boxy.js...
摘要:脚本资源,jQuery,聊天室 Web聊天室，jQuery新皮肤随机聊天，聊天时可添加表情和魔法表情，还可发送音乐、发送Flash、发送图片...用到了jquery.boxy.js和artDialog.min.js小插件，对于学习来说，参考价值也很大。