jquery淡入淡出弹出窗口

<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="" />
               
               
               <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淡入淡出效果

jquery淡入淡出 弹出窗口

猜你喜欢

jquery淡入淡出弹出窗口