jQuery学习记录----弹出窗口（四）
项目中为了简化用户的操作，常常会使用一些弹出窗口，这样用户的很多操作不需要跳转，都可以在一个页面上完成。其实大多的弹出窗口都是一个层，所以也可以称为弹层。其基本思路是：
1、先在页面中定义层，该层中再嵌套层，如嵌套一个表示窗口标题栏的层，再嵌套一个表示窗口内容的层。如下
<a href="javascript:showWin()">弹出窗口</a> <div id="win"> <div id="title">标题<span id="close" onclick="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');}?一个简单的弹出窗口即已完成。此处的缺点为此窗口还不能被拖动。所以在附件中放了一个比较完整的弹层的例子。
?
此篇代码见附件。
?
?