jQuery如何实现弹出框及遮罩层效果
沉沙 2018-07-24 来源 : 阅读 2299 评论 0

摘要:本篇jQuery教程探讨了jQuery如何实现弹出框及遮罩层效果,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。

HTML:

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <meta http-equiv="X-UA-Compatible" content="ie=edge">

 <title>Document</title>

 </head>

 <body>

   <input type="submit" value="点我">

   <!-- 提交按钮弹出DOM部分 -->

   <div class="mask"></div>

   <div class="box">

    <!-- 关闭按钮 -->

    <a class="open">X</a>

    <!-- 内容 -->

    哈哈哈哈哈哈哈

   </div>

 </body>

 </html>

javascript:

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

 $(document).ready(function(){

  $("input").click(function(e){

    // 阻止默认提交表单事件

    e.preventDefault();

    // 将弹框位置居中

    center($(".box"));

    // 遮罩层显示,此处window也可以换成document,区别在于遮罩层高度的差别

    $('.mask').show().height($(window).height());

    // 弹框显示

    $('.box').show();

    //弹框弹出后隐藏掉滑动条,阻止了滚轮对页面的控制

    $("body").css({overflow:"hidden"});

    

  });

}).keydown(function(e){         //document监听按下esc将关闭弹出框及遮罩层

  if(e.keyCode==27){

    $('.mask').hide();

    $('.box').hide();

    // 重新显示滑动条

    $("body").css({overflow:"auto"});

  }

})// 关闭按钮

$('.open').click(function(e) {

  func_close();

})// 关闭函数function func_close(){

      $('.mask').hide();

      $('.box').hide();

      // 重新显示滑动条

      $("body").css({overflow:"auto"});

    }// 居中函数function center(obj){

  var screenWidth = $(window).width(), screenHeight = $(window).height(); //当前浏览器窗口的 宽高

  var scrolltop = $(window).scrollTop();//获取当前窗口距离页面顶部高度

  var objLeft = (screenWidth - obj.width())/2;

  var objTop = (screenHeight - obj.height())/2 + scrolltop;

  obj.css({"left": objLeft + 'px', "top": objTop + 'px','display': 'block'});

}</script>

CSS:

 /*遮罩层样式*/.mask{

  display:none;

  position:absolute;

  z-index:10;

  left:0;

  top:0;

  width:100%;

  height:100%;

  background:#666;

  opacity:0.5;

  -moz-opacity:0.5;

  filter:alpha(opacity=50)

}/*弹出框样式*/.box{

  z-index:999;

  display:none;

  position: relative;

  width:340px;

  height:180px;

  border:solid 1px #999;

  border-radius:5px;

  background-color:#fff;

  box-shadow:0 0 0 1px #00aff0;

  text-align:center;

  padding-top: 20px;

}/* 关闭按钮 */.open {

  position: absolute;

  top: 0;

  right: 10px;

}/*按钮样式*/input{

  display:block;

  width:100px;

  height:30px;

  outline:none;

  cursor:pointer;

  font-size:16px;

}

 

本文由职坐标整理发布,欢迎关注职坐标WEB前端jQuery频道,获取更多jQuery知识!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 2 不喜欢 | 0
看完这篇文章有何感觉?已经有2人表态,100%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程