权限系统分到的任务是:分栏和页面弹出框,开始感觉这两个任务都不难,因为在jQuery的视频中讲到过,所以找到了之前自己完成的实例脑补了一下,分栏的确是比较简单的,那么就来说一下关于页面弹出框的问题吧.
开始没多想,就简单的根据实例完成了自己需要的弹出框(达到的效果：点击按钮在页面中间弹出框，并且弹出框可以根据浏览器的大小而改变位置，始终保持在页面中间显示)
html：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>窗口显示-陈丽娜</title>
<link rel="stylesheet" type="text/css" href="css/window.css">
<script type="text/javascript" src='js/jquery.js'></script>
<script type="text/javascript" src='js/window-2.js'></script>
</head>
<body>
<!-- ///* <input type="button" value="左下角显示窗口" id="leftpop"/>*/-->
<input type="button" value="弹窗" id="conterpop"/>
</p>
<div class="window" id="center">
<div class="title">
添加模块
<img src="image/close.gif" alt="关闭" /> </div>
<div class="content">
<table class="pageFormContent" >
<tr class="dialogContent" >
<td class="dialoglable">模块名称：</td>
<td ><input name="md" type="text" size="30" /></td>
</tr>
<tr>
<td class="dialoglable">所属模块：</td>
<td >
<select name="model" class="required combox">
<option value ="">请选择</option>
</select>
</td>
</tr>
<tr><td class="dialoglable">英文标识：</td>
<td >
<input name="mdId" type="text" size="30" />
</td>
</tr>
<tr><td class="dialoglable">排序号：</td>
<td><input name="LevelId" type="text" size="30" /></td>
</tr>
<tr><td class="dialoglable">关联组织：</td>
<td >
<select name="orgName" class="required combox">
<option value ="">请选择</option>
</select>
</td>
</tr>
<tr><td class="dialoglable">所属类型：</td>
<td >
<select name="typeName" class="required combox">
<option value ="">请选择</option>
</select>
</td>
</tr>
<tr><td class="dialoglable">描述：</td>
<td >
<textarea rows="5" name="remark" style="width: 295px" ></textarea>
</td>
</tr>
<tr class="bar">
<td colspan="2" class="dialogBar">
<input id="button" type="button" value="保存" class="dialogbutton" />
<input id="Reset1" type="reset" value="重置" class="dialogbutton"/>
<input id="dialogcancel" type="submit" value="取消" class="dialogbutton"/>
</td>
</tr>
</table>
</div>
</div>
<body>
</html>css:
.window{
background-color: #99FFCC;
width:430px;
margin:5px;
padding:2px;
/*位置绝对定位*/
position:absolute;
left: 277px;
top: 491px;
display:none;
}
.content{
height:360px;
background-color:#FFFFFF;
border:2px solid #99FFCC;
/*滚动条显示*/
overflow:auto;
clear:both;
}
.title img{
float:right;
cursor:pointer;
}
.title{
padding:2px;
}js:
// JavaScript Document
$(document).ready(function(){
//1点击按钮可以再屏幕中间显示一个窗口
//2点击按钮2可以再屏幕左下角显示一个窗口
//3页面加载完成后再屏幕右下角飘一个窗口，吗并且窗口慢慢淡出
//点击关闭按钮，窗体关闭
/*$(".title img").click(function(){
$(this).parent().parent().hide("slow");
});*/
var centerwin=$("#center").mywin({left:"center",top:"center"});
/*var leftwin=$("#left").mywin({left:"left",top:"bottom"},function(){leftwin.slideUp("slow");});*/
$("#conterpop").click(function(){
//鼠标点击按钮之后，把id为center的窗口显示在页面中间
//计算位于屏幕中间的窗口的左边界和上边界的值
//浏览器可视区的宽和高，当前窗口的宽和高
//考虑滚动条的上下左右边界问题
//如何获得滚动条的边界值
centerwin.show("slow");
});
});
///封装插件
$.fn.mywin=function(position, hidefunc){
if(position && position instanceof Object){
var positionleft=position.left;
var positiontop=position.top;
var windowobj=$(window);
var currentwin=this;
var cwinwidth=this.outerWidth(true);
var cwinheight=this.outerHeight(true);
var left;
var top;
var scrollleft;
var scrolltop;
var browserwidth;
var browserheight;
//计算浏览器当前可是区域的宽和高，以及滚动条左上边界
function getWinDin(){
scrollleft=$(window).scrollLeft();
scrolltop=$(window).scrollTop();
browserwidth=$(window).width();
browserheight=$(window).height();
}
//计算窗口真的左边界的值
function calLeft(positionleft,scrollleft,browserwidth,cwinwidth){
if(positionleft && typeof positionleft=="string"){
if(positionleft=="center"){
left=scrollleft+(browserwidth-cwinwidth)/2;
}else if(positionleft=="left"){
left=scrollleft;
}else if(positionleft=="right"){
left=scrollleft+browserwidth-cwinwidth;
}
}
//缓存数据
currentwin.data("positionleft",positionleft);
}
//计算窗口真实的上边界值
function callTop(positiontop,scrolltop,browserheight,cwinheight){
if(positiontop && typeof positiontop=="string"){
if(positiontop=="center"){
top=scrolltop+(browserheight-cwinheight)/2;
}else if(positiontop=="top"){
top=scrolltop;
}else if(positiontop=="bottom"){
top=scrolltop+browserheight-cwinheight;
}
}
//缓存数据
currentwin.data("positiontop",positiontop);
}
//窗体位置改变
function moveWin(){
calLeft(currentwin.data("positionleft"),scrollleft,browserwidth,cwinwidth);
callTop(currentwin.data("positiontop"),scrolltop,browserheight,cwinheight);
currentwin.animate({left:left,top:top},300);
}
//浏览器滚动条滚动时，移动窗口的位置
var scrollTimeout;
$(window).scroll(function(){
clearTimeout(scrollTimeout);
scrollTimeout=setTimeout(function(){
getWinDin();
moveWin();
},300);
});
//浏览器大小改变时，移动窗口的位置
$(window).resize(function(){
getWinDin();
moveWin();
});
//关闭弹出框
currentwin.children(".title").children("img").click(function(){
if(!hidefunc){
currentwin.hide("slow");
}else{
hidefunc();
}
});
getWinDin();
calLeft(positionleft,scrollleft,browserwidth,cwinwidth);
callTop(positiontop,scrolltop,browserheight,cwinheight);
currentwin.css("left",left).css("top",top);
//返回当前对象，以便于可以级联的执行其他方法
return this;
}
}
然而这个弹出框是实现了，但是弹出框并不能跟随着鼠标的移动而移动，为了用户体验性更好，所以要求进行改变，在上面实例的基础上做修改是没办法完成的，因为已经固定弹出框是在页面中间显示了，所以查了一些其他的方法，其中一个比较简单的方法就是利用jquery ui封装好的dialog方法：
html:基本和上一个的html是一样的，只是改变一下div的类名：
<!doctype html>
<html lang="en">
<head>
<meta charset="gbk" />
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="./css/jquery-ui.css" />
<script src="./js/jquery-1.9.1.js"></script>
<script src="./js/jquery-ui.js"></script>
<link rel="stylesheet" href="./css/style.css" />
<script type="text/javascript">
function dialogOpen()
{
$(function () {
$("#dialog").dialog();
});
}
</script>
</head>
<body>
<input type="button" id="btnAdd" value="弹窗" onClick="dialogOpen();" />
<div id="dialog" title="添加模块" style="display:none">
table部分省略
</div>
</body>
</html>
只需要引用juqery ui封装好的js和css就可以完成弹出框，然而不是很满意的地方就是这个弹出框的效果图：
标题的背景图是灰色与整个系统并不协调，所以需要改正，一种方法是去jquery ui的官网去下载皮肤，由于我的英文不是很好没有找到下载地址，看来还要好好学英语要；另一种方法就是修改jquery ui的css，在代码调试窗口查清楚标题栏的类名，在jquerycss中进行背景色的调整即可完成。
这两种实现方法一个比较原始，是自己通过js敲出来的，一个是用封装好的方法，两种方法实现的效果虽然太相同，但是也大同小异。其实第一中方法也可以封装成一个js，在以后需要的时候调用即可。
虽然都不是什么难点，但是一步一步的实现还是花费了我一段时间的，不过以后遇到这个就不用再担心了。
1600
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
