<!--完善资料弹窗-->
<div id="dialogBg"></div>
<div id="dialog" class="animated">
<div class="dialogTop">
<span href="javascript:;" class="claseDialogBtn">完善资料</span>
</div>
<form action="" method="post" id="editForm">
<ul class="editInfos">
<!--头像-->
<img width="50" height="50" src="images/icon-touxiang.jpg" alt="" />
<!--<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">-->
<!--昵称输入框-->
<li><input style="width: 80%;" type="text" name="" required value="" class="ipt" placeholder="请输入昵称" /></li>
<!--性别选项-->
<li>
<div class="xingbie">
<div class="center">
<div class="left">
<div class="mui-input-row mui-radio ">
<label>男</label>
<input name="radio" type="radio" value="man" checked>
</div>
</div>
<div class="right">
<div class="mui-input-row mui-radio ">
<label>女</label>
<input name="radio" type="radio" value="women">
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
</li>
<!--下一步按钮-->
<li>
<div id="xiayibu" style="width: 100%;margin-top: 30px;">
<div align="center" style="width: 80%;margin: auto;">
<button type="button" class="mui-btn mui-btn-blue mui-btn-block">下一步</button>
</div>
</div>
</li>
<!--资料填写成功-->
<script>
$(document).ready(function(){
$("#xiayibu button").on("tap",function(){
if($(".ipt").val()){
$("#dialogBg").fadeOut(300,function(){
$("#dialog").fadeOut();
});
mui.toast('资料填写成功',{duration:'long',type:'div'});
}
})
})
</script>
</ul>
</form>
</div>
#dialogBg {
width: 100%;
height: 100%;
background-color: #000000;
opacity: .5;
filter: alpha(opacity=60);
position: fixed;
top: 0;
left: 0;
z-index: 9999;
display: none;
}#dialog {
width: 300px;
height: 350px;
margin: 0 auto;
display: none;
background-color: #ffffff;
position: fixed;
top: 50%;
left: 50%;
margin: -175px 0 0 -150px;
z-index: 10000;
border: 1px solid #ccc;
border-radius: 10px;
-webkit-border-radius: 5px;
box-shadow: 3px 2px 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 3px 2px 4px rgba(0, 0, 0, 0.2);
}.dialogTop {
width: 80%;
margin: 0 auto;
/* border-bottom: 1px dotted #ccc; */
letter-spacing: 1px;
padding: 15px 0;
text-align: left;
font-size: 14px;
}.dialogIco {
width: 50px;
height: 50px;
position: absolute;
top: -25px;
left: 50%;
margin-left: -25px;
}
.editInfos img{
display: block;
margin: auto;
border-radius: 7px;
/*width: 30%;*/
/*background-image: url(../images/icon-touxiang.jpg);*/
}.editInfos {
padding: 15px 0;
}.editInfos li {
width: 90%;
margin: 8px auto auto;
text-align: center;
}.ipt {
border: 1px solid rgba(0, 0, 0, .2);
margin-top: 20px;
}.ipt:focus {
outline: none;
border-color: #66afe9;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
}
.xingbie{
margin-top: 20px;
}
.xingbie .center{
min-width: 70%;
width: 70%;
margin: auto;
}
.xingbie .left{
float: left;
}
.xingbie .right{
float: right;
}
.submitBtn {
width: 90px;
height: 30px;
line-height: 30px;
font-family: "微软雅黑", "microsoft yahei";
cursor: pointer;
margin-top: 10px;
display: inline-block;
border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
background-color: #428bca;
color: #fff;
box-shadow: 0 -3px 0 #2a6496 inset;
-webkit-box-shadow: 0 -3px 0 #2a6496 inset;
}.demo--label{margin:20px 20px 0 0;display:inline-block}
.demo--radio{display:none}
.demo--radioInput{background-color:#fff;border:1px solid rgba(0,0,0,0.15);border-radius:100%;display:inline-block;height:16px;margin-right:10px;margin-top:-1px;vertical-align:middle;width:16px;line-height:1}
.demo--radio:checked + .demo--radioInput:after{background-color:#57ad68;border-radius:100%;content:"";display:inline-block;height:12px;margin:2px;width:12px}
.demo--checkbox.demo--radioInput,.demo--radio:checked + .demo--checkbox.demo--radioInput:after{border-radius:0}#xiayibu button{
width: 90%;
height: 40px;
}
<script type="text/javascript">
var w,h,className;
function getSrceenWH(){
w = $(window).width();
h = $(window).height();
$('#dialogBg').width(w).height(h);
}
window.onresize = function(){
getSrceenWH();
}
$(window).resize();
// $(function(){
// getSrceenWH();
//
// $('#zhuce').click(function(){
// $('#dialogBg').fadeIn(300);
// $('#dialog').fadeIn();
// });
// });$("#xiayibu button").on("tap",function(){
if($(".ipt").val()){
$("#dialogBg").fadeOut(300,function(){
$("#dialog").fadeOut();
});
mui.toast('资料填写成功',{duration:'long',type:'div'});
}
})
</script>
分为遮罩层+弹出层div,使用jquery淡入淡出效果