jQuery学习记录----弹出窗口（四）

项目中为了简化用户的操作，常常会使用一些弹出窗口，这样用户的很多操作不需要跳转，都可以在一个页面上完成。其实大多的弹出窗口都是一个层，所以也可以称为弹层。其基本思路是：

1、先在页面中定义层，该层中再嵌套层，如嵌套一个表示窗口标题栏的层，再嵌套一个表示窗口内容的层。如下

<a href="javascript:showWin()">弹出窗口</a>
    <div id="win">
    	<div id="title">标题<span id="close" οnclick="hide()">X</span></div>
    	<div id="content">窗口</div>
    </div>

 初始时将层隐藏，点击“弹出窗口”链接，再将层显示出来即可。有的弹层可能会利用JS代码来生成这个窗口层。

2、利用CSS控制层的显示样式。例如边框，大小，出现的位置，标题层的背景等等，使它看上去更像一个窗口。如下：

#win{
	border: 1px solid red;
	width: 300px;
	height: 180px;
	position: absolute;
	top: 50px;
	left: 350px;
	display: none;
}

#title{
	background-color: blue;
	color: yellow;
	padding-left: 10px;
	height: 30px;
	padding-top: 5px;
}

#content{
	padding-left: 10px;
	padding-top: 10px;
}

#close{
	width:10px;
	margin-left: 240px;
	cursor: pointer;
}

 3、再利用JS控制点击链接显示层，点击关闭再将层隐藏起来。如下

function showWin(){
	var jqueryObj=$('#win');
	//jqueryObj.css('display','block');
	//jqueryObj.show('slow');
	jqueryObj.fadeIn('slow');
}

function hide(){
	var jqueryObj=$('#win');
	//jqueryObj.css('display','none');
	//jqueryObj.hide('slow');
	jqueryObj.fadeOut('slow');
}

 一个简单的弹出窗口即已完成。此处的缺点为此窗口还不能被拖动。所以在附件中放了一个比较完整的弹层的例子。

 

此篇代码见附件。