页面布局:
<body>
<div id="fullbg">
</div>
<div id="main">
<a href="javascript:showBg();">点击查看效果</a>
<div id="dialog">
<p class="close">
<span>
新增用户
</span>
<a href="#" onclick="closeBg();"><img src="img/弹窗/圆角矩形1拷贝2.png"/></a>
</p>
<div class="dialog_main">
<div class="num">手机号:<input type="text" /></div>
<div class="name">
姓名:<input type="text" />
</div>
<div class="sex">
性别:<input type="radio" name="sex" id="" value="" />男
<input type="radio" name="sex" id="" value="" />女
</div>
<em>功能:</em>
<div class="fun">
<div><input type="radio" name="fun" id="" value="" />内容内容</div>
<div><input type="radio" name="fun" id="" value="" />内容内容</div>
<div><input type="radio" name="fun" id="" value="" />内容内容</div>
</div>
<a href=""onclick="closeBg();"><input type="button" name="" id="" value="取消" class="qx" /></a>
<input type="button" name="" id="" value="确定" class="qd" />
</div>
</div>
</div>
</body>
css样式:
<style>
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
background: burlywood;
}
em{
font-style: normal;
}
#main
{
height: 1800px;
padding-top: 90px;
text-align: center;
}
#fullbg
{
background-color: #fff;
left: 0;
opacity: 0.5;
position: absolute;
top: 0;
z-index: 3;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
}
#dialog
{
height: 365px;
left: 50%;
margin: -200px 0 0 -200px;
padding: 1px;
position: fixed !important; /* 浮动对话框 */
position: absolute;
top: 50%;
width: 365px;
z-index: 999;
display: none;
background: url(img/弹窗/bg.png) no-repeat;
}
#dialog .close span{
position: absolute;
top: 10px;
left: 40%;
color: #fff;
font-size: 16px;
}
#dialog .close a
{
position: absolute;
right: 15px;
top: 15px;
}
#dialog .dialog_main{
margin-top: 60px;
text-align: left;
}
#dialog .dialog_main .num{
margin-left: 30px;
}
#dialog .dialog_main .name,
#dialog .dialog_main .sex,
#dialog .dialog_main em{
margin-left: 42px;
margin-top: 10px;
}
#dialog .dialog_main .fun div{
width: 230px;
height: 45px;
line-height: 45px;
padding-left: 23px;
border-bottom:1px solid #eaeaea ;
font-size: 12px;
}
#dialog .dialog_main .fun{
margin-left: 73px;
}
#dialog .dialog_main .fun input{
margin-right: 15px;
}
#dialog .dialog_main .sex input{
margin-left: 23px;
}
#dialog .dialog_main input[type=text]{
border: 2px solid #b7b9be;
border-radius: 2px;
width: 150px;
height: 20px;
margin-left: 20px;
padding-left: 10px;
}
#dialog .dialog_main input[type=button]{
border: 1px solid #c7c6ca;
border-radius: 2px;
font-size: 11px;
width: 70px;
height: 28px;
margin-top: 10px;
}
#dialog .dialog_main .qx{
background: url(img/弹窗/圆角矩形1拷贝3.png) no-repeat 10% ;
margin-left: 165px;
color: #474747;
}
#dialog .dialog_main .qd{
margin-left: 10px;
color: #fff;
background:url(img/弹窗/形状1.png) no-repeat 10% #118eea;
}
</style>
jquery(功能实现)
<script type="text/javascript">
//显示灰色 jQuery 遮罩层
function showBg() {
var bh = $("body").height();
var bw = $("body").width();
$("#fullbg").css({
height: bh,
width: bw,
display: "block"
});
$("#dialog").show();
}
//关闭灰色 jQuery 遮罩
function closeBg() {
$("#fullbg,#dialog").hide();
}
</script>
效果图: