问题分析:
HTML中的浮动窗口,可以使用CSS的定位方式完成,同时使用这种方式来完成这个功能也是一种较为简单的方式,只需要有HTML以及CSS的知识就可以完成了。
举例如下:
在以下示例中,将演示页面左右两侧分别放置一个高度为500像素,宽度为200像素的浮动窗口。示例中使用的定位方式为:固定定位(fixed),所有它们将永远的跟随页面进行滚动。
HTML代码:
<div id="left"><p>我是左侧浮动窗口的内容</p>
</div>
<div id="right">
<p>我是右侧浮动窗口的内容</p>
</div>
CSS代码:
body{/*
* 为body标签设置背景仅仅是为了演示效果。
* 与浮动窗口本身无关。
*/
background-color: #ccc
}
#left, #right{
position: fixed
top: 100px
width: 200px
height: 500px
line-height: 500px
text-align: center
border: 1px solid #000
background-color: #FFF
}
#left{
left: 50px
}
#right{
right: 50px
}
页面初始化效果:
首先根据需求我们需要一个按钮,一个d出窗口层;OK,废话不多说;
按钮就用一个基本的:
<button class="btn">Click me</button>
<div class="dialog">我是浮动的窗口</div>
我们要给浮动层设置一下样式
.dialog{width:200pxheight:200pxborder:solid 1px #000position:absoluteright:10pxtop:100pxline-height:200pxtext-align:centerdisplay:none}
OK ,下面就是JS部分:
首先需要引入一个JS库,版本自己定义:
然后给按钮添加相应的点击事件,让点击button的时候,显示出浮动层
$(".btn").click(function(){
$(".dialog").show(100)
})
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)