HTML代码：
js代码：
测试源码如下：
<!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" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>无标题文档</title>
<style>
.layer_a{position:fixed;top:0px;left:0px;z-index:10;height:100%;width:100%;display:none;}
.bg_layer{position:absolute;z-index:10;top:0px;left:0px;width:100%;height:100%;background-color:#000000;opacity:0.3;}
.layer_a .layer_connect{position:absolute;bottom:85px;left:10%;z-index:11;width:80%;max-height:70%;overflow:hidden;overflow-y:auto;line-height:30px;padding:10px;border-radius:4px;background-color:#fff;}
.layer_a label{padding-left:10px;}
</style>
</head>
<body>
<div>
<h4>选择插入广告：</h4>
<p class="btn_layer">
<button type="button">选择广告</button><br />
<span class="txt_show">广告：<em></em></span>
</p>
<form class="layer_a" >
<div class="bg_layer"></div>
<div class="layer_connect bg_white">
<label>
<input name="ad_choose" type="radio" checked="checked" /><span class="text">顶部广告样式1</span>
</label><br>
<label>
<input name="ad_choose" type="radio" checked="checked" /><span class="text">顶部广告样式2</span>
</label><br>
<label>
<input name="ad_choose" type="radio" checked="checked" /><span class="text">顶部广告样式1</span>
</label><br>
<label>
<input name="ad_choose" type="radio" checked="checked" /><span class="text">顶部广告样式2</span>
</label>
</div>
</form>
</div>
</body>
<script src="jquery.min.js"></script>
<script>
//点击显现
$(".btn_layer").click(function () { $(".layer_a").show(); });
//选择后消失
$(".layer_a").find("input:radio").click(function () {
var val = $(this).next(".text").text();
$(".btn_layer").find(".txt_show").children("em").text(val);
setTimeout(function () {
$(".layer_a").hide();
}, 500);
})
</script>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
