用boxy插件来打开一个模态窗口,需要引用3个文件,这3个文件可以在官方网上下载到,引用如下:
<link href="css/boxy.css" rel="stylesheet" rev="stylesheet" media="all" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.boxy.js"></script>
其中boxy.css,jquery.boxy.js可以根据自己的需求对其进行修改。
下面我来实现一个小例子:
从官方网下载的例子最开始的效果是这样的
整体的色调与我的系统有点不搭调,我对其进行了修改,效果图如下:
实现代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>模式窗口</title>
<link href="css/boxy.css" rel="stylesheet" rev="stylesheet" media="all" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.boxy.js"></script>
<script type="text/javascript" >
$(function(){
function newModal() {
var box=new Boxy($("#showmodel"), {
modal: true,
title:"更换网站Logo图片",
closeText:"×"
});
box.resize(200,200);
};
$('#modal').click(newModal);
});
</script>
</head>
<body>
<input type="button" id='modal' value="更换网站Logo图片" /><br/>
<div id="showmodel" style="display:none;">
</div>
</body>
</html>
其中我对boxy.css样式表进行了修改,在此我就不列出修改后的样式表
参考网页
Blog: http://www.blogjava.net/wangxinsh55/archive/2008/11/24/242295.html
官方文档: http://onehackoranother.com/projects/jquery/boxy/
jQuery官方链接:http://plugins.jquery.com/project/boxy