Jquery之Boxy插件创建模态窗口

在网站开发中经常会用到模态窗口,如果直接利用javascirpt的window.showModalDialog()打开一个模式窗口,虽然实现了模式窗口的功能,但十分的不好看。下面我就用jquery的boxy插件来实现打开一个模式窗口。

用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

原文地址:https://www.cnblogs.com/zxjyuan/p/1632419.html