至于怎么写实际上很简单，利用dom获取其id，把id传给一个变量，设一个函数，在函数里写获取ID变量的css即可实现，至于怎么写，采纳之后会给你写出代码。要不然辛辛苦苦写了代码最后没有任何回报，心不甘啊，因为我是小白，所以很看重这些的。
<!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/htmlcharset=utf-8" />
<title>LIGHTBOX EXAMPLE</title>
<style>
* {
margin:0
padding:0
}
html, body {
height: 100%
width: 100%
font-size:12px
}
.white_content {
display: none
position: absolute
top: 25%
left: 25%
width: 50%
padding: 6px 16px
border: 12px solid #D6E9F1
background-color: white
z-index:1002
overflow: auto
}
.black_overlay {
display: none
position: absolute
top: 0%
left: 0%
width: 100%
height: 100%
background-color:#f5f5f5
z-index:1001
-moz-opacity: 0.8
opacity:.80
filter: alpha(opacity=80)
}
.close {
float:right
clear:both
width:100%
text-align:right
margin:0 0 6px 0
}
.close a {
color:#333
text-decoration:none
font-size:14px
font-weight:700
}
.con {
text-indent:1.5pc
line-height:21px
}
</style>
<script>
function show(tag){
var light=document.getElementById(tag)
var fade=document.getElementById('fade')
light.style.display='block'
fade.style.display='block'
}
function hide(tag){
var light=document.getElementById(tag)
var fade=document.getElementById('fade')
light.style.display='none'
fade.style.display='none'
}
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="show('light')">打开1</a>
<a href="javascript:void(0)" onclick="show('light2')">打开2</a>
<div id="light" class="white_content">
<div class="close"><a href="javascript:void(0)" onclick="hide('light')">关闭</a></div>
<div class="con">
内容1 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</div>
<div id="light2" class="white_content">
<div class="close"><a href="javascript:void(0)" onclick="hide('light2')">关闭</a></div>
<div class="con">
内容2
</div>
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
首先根据需求我们需要一个按钮，一个d出窗口层；\x0d\x0aOK，废话不多说；\x0d\x0a按钮就用一个基本的：\x0d\x0aClick me\x0d\x0a我是浮动的窗口\x0d\x0a\x0d\x0a我们要给浮动层设置一下样式\x0d\x0a.dialog{width:200pxheight:200pxborder:solid 1px #000position:absoluteright:10pxtop:100pxline-height:200pxtext-align:centerdisplay:none}\x0d\x0a\x0d\x0aOK ,下面就是JS部分：\x0d\x0a首先需要引入一个JS库，版本自己定义：\x0d\x0a然后给按钮添加相应的点击事件，让点击button的时候，显示出浮动层\x0d\x0a$(".btn").click(function(){\x0d\x0a$(".dialog").show(100)\x0d\x0a}) 回答于 2022-11-16欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）