实现原理:
点击某一控件实现遮罩弹出会话框 原理就是点击后弹出两个div样式 。其中一个就是遮罩层 给他添加透明度即可实现遮罩,另一个就是对话框内容
<div class="mask" id="mask"></div>
<div class="input_informatino" id="input_informatino">
<div class="information_title">
<span>身份验证</span>
<i class="iconfont icon-cha" id="close"></i>
</div>
<div class="information_content">
<ul>
<li>
<i class="iconfont icon-shoujihao"></i>
<input type="number" name="" placeholder="请输入手机号">
</li>
<li>
<i class="iconfont icon-yanzhengma"></i>
<input type="number" name="" class="msmcode" id="msmcode" placeholder="输入验证码">
<span>获取验证码</span>
</li>
</ul>
<button>提交</button>
</div>
</div>
<script type="text/javascript">
$("#immediately").click(function(){
$("#mask").show();
$("#input_informatino").show();//查找ID为popup的DIV show()显示#gray
$("body").css("overflow","hidden");
showMask();
letDivCenter(".input_informatino");
});
//兼容火狐、IE8
function showMask(){
$("#mask").css("height",$(document).height());
$("#mask").css("width",$(document).width());
$("#mask").show();
}
//让指定的DIV始终显示在屏幕正中间
function letDivCenter(divName){
var top = ($(window).height() - $(divName).height())/2;
var left = ($(window).width() - $(divName).width())/2;
var scrollTop = $(document).scrollTop();
var scrollLeft = $(document).scrollLeft();
$(divName).css( { position : 'absolute', 'top' : top + scrollTop, left : left + scrollLeft } ).show();
}
$("#close").click(function(){
$("#mask").hide();
$("#input_informatino").hide();
})
</script>
.mask{
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
background: rgba(0,0,0,0.3);
z-index: 99;
display: none;
}
.input_informatino{
width: 80%;
height: auto;
position: absolute;
top: 25%;
left: 10%;
z-index: 100;
display: none;
padding: 0px 10px;
background-color: #ffffff;
}
.information_title{
width: 100%;
height: 50px;
line-height: 50px;
}
.information_title span{
font-size: 15px;
color: #212121;
}
.information_title i{
float: right;
}
.information_content ul li{
width: 100%;
height: 55px;
position: relative;
line-height: 55px;
margin-top: 5px;
float: left;
border: thin solid #e0e0e0;
}
.information_content ul li i{
width: 10%;
float: left;
text-align: right;
font-size: 20px;
}
.information_content ul li input{
width: 90%;
height: 50px;
font-size: 13px;
line-height: 50px;
float: left;
color: #adadad;
border: none;
}
.information_content ul li span{
position: absolute;
top: 0;
right: 10px;
color: #6591e0;
font-size: 13px;
border-left: thin solid #e0e0e0;
padding-left: 10px;
}
.msmcode{
width: 50%;
}
.information_content button{
width: 100%;
background-color: #6591e0;
height: 40px;
line-height: 40px;
color: #ffffff;
margin-top: 10px;
margin-bottom: 20px;
}