24H免费课程咨询  TEL:13401595960   QQ:1870218756  微信:13401595960(李老师)

东方博宜

网站首页 > 软件开发资讯 > Java开发

[常州前端培训]JQuery实现页面遮罩特效

2017-12-03 16:59:34 东方博宜 阅读

遮罩效果

例子:

             <style>

                .gray{

                   width:100%;

                   height:100%;

                   background-color:#222;

                   opacity:0.5;

                   position:absolute;

                   left:0px;

                   top:0px;

                   z-index:100;

                   display:none;

                }

               

                .modal{

                    width:80%;

                    min-width:500px;

                    max-width:1000px;

                    height:60%;

                    min-height:200px;

                    max-height:500px;

                    background-color:#FFF;

                    position:absolute;

                    left:0px;

                    top:-1000px;

                    z-index:200;

                    display:none;

                }

               

                .modal .close{

                    width:40px;

                    height:40px;

                    line-height:40px;

                    font-size:20px;

                    cursor:pointer;

                    float:right;

                    background-color:#CCC;

                    color:#FFF;

                    text-align:center;      

                }

             </style>

                   <input type="button" value="显示信息"/>

                  

                   <script src="js/jquery-1.11.3.js"></script>

                   <script>

                       $(document).ready(function(){

                           $("[value='显示信息']").click(function(){

                               $(".modal").show();

                               var left = ($(window).width() - $(".modal").width()) / 2;

                               var height = ($(window).height() - $(".modal").height()) / 2;

                               $(".modal").css("left",left);

                               $(".gray").fadeIn(600);

                               $(".modal").animate({top:height},600);

                           });

                          

                           //关闭

                           $(".modal .close").click(function(){

                              $(".gray").fadeOut(600);

                              var h = $(".modal").height();

                              $(".modal").animate({top:-2 * h},600);

                           });

                          

                           //resize

                           $(window).resize(function(){

                               var left = ($(window).width() - $(".modal").width()) / 2;

                               var height = ($(window).height() - $(".modal").height()) / 2;

                               $(".modal").css("left",left);

                               $(".modal").css("top",height);

                           })

                       });

                   </script>

                  

                   <div class="gray">

                  

                   </div>

                   <div class="modal">

                       <div class="close">

                          ×

                       </div>

                      

                   </div>

图片.png

Powered by 东方博宜教育咨询江苏有限公司  ©2008-2018 www.czos.cn