资讯专栏INFORMATION COLUMN

简单实现弹出弹框页面背景半透明灰,弹框内容可滚动原页面内容不可滚动的效果(JQuery)

番茄西红柿 / 2366人阅读

摘要:当弹框弹出时原页面内容不能滚动,即将样式设为原页面的内容就不会动了当弹框关闭后再将样式改为默认的中的写一个函数,再在弹框的中调用函数。

弹出弹框

效果展示

实现原理

  1. html结构比较简单,即:

    遮罩层
    弹框
  2. 先写覆盖显示窗口的遮罩层div.box,因为要在整个窗口显示固定,所以position要设为fixed,background设为灰色半透明,由于要遮住整个显示屏,width和height都设为100%(body和html的width和height也都设为100%);

  3. 在遮罩层的div.box里写弹框的div.container,位置相对于父级定位

代码实现

HTML:

1 <div>
2     <button class="open">点我弹出弹框button>
3 div>
4 <div class="box">
5     <div class="container">
6         <button class="close">关闭弹框button>
7     div>
8 div>
 

CSS:

 1 html, body {
 2     width:100%;
 3     height:100%;
 4 }
 5 .box {
 6     display: none;
 7     width: 100%;
 8     height: 100%;
 9     position: fixed;
10     top: 0;
11     left: 0;
12     background: rgba(51,51,51,0.5);
13     z-index: 3;//根据自己页面情况设置
14 }
15 .container {
16     width: 500px;
17     height: 200px;
18     position: absolute;
19     top: 50%;//以下3行设置弹框居中页面,根据自己页面情况选择
20     left: 50%;
21     transform: translate(-50%, -50%);
22     background: #fff;
23     z-index: 5;//根据自己页面情况设置
24 }
 

JavaScript:

1 $(document).ready(function(){
2     $(".open").click(function(){
3         $(".box").show();
4     })
5     $(".close").click(function(){
6         $(".box").hide();
7     })
8 })

 

原页面内容不可滚动弹框内容可滚动

效果展示

实现原理

  1. 弹框内容需要滚动一定是内容超出弹框的高度,所以要给弹框内想滚动的部分设overflow: auto;

  2. 然后是Jq实现部分。当弹框弹出时原页面内容不能滚动,即将body样式设为overflow: hidden;原页面的内容就不会动了;当弹框关闭后再将body样式改为默认的overflow: auto;

  3. 2中的JS写一个函数,再在弹框的JQ中调用函数。

代码实现

CSS:

.container中增加一条

1 .container {
2     overflow: auto;
3 }
 

JavaScript:

1 function toggleBody(isPopup) {
2     if (isPopup) {
3         document.body.style.height = 100%;
4         document.body.style.overflow = hidden;
5     }else {
6         document.body.style.height = auto;
7         document.body.style.overflow = auto;
8     }
9 }
 

JQ中需要增加调用toggleBody()函数

1 $(".open").click(function(){
2     $(".box").show();
3     toggleBody(1);//增加部分
4 })
5 $(".close").click(fundtion(){
6     $(".box").hide();
7     toggleBody(0);//增加部分
8 })
 

 *有错误的地方欢迎指正

 *转载请注明出处

 

 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1254.html

相关文章

  • 移动端下弹框禁止背景滑动

    摘要:移动端下弹框禁止背景滑动茴字写法有很多种,找到最适合的才是好的。 移动端下弹框禁止背景滑动 茴字写法有很多种,找到最适合的才是好的。 以下下方法在一屛之内是可行的 body;html 设置overflow:hidden .overflow-hidden{ height: 100%; overflow: hidden; } // 弹出时 $(html, body,.pa...

    pf_miles 评论0 收藏0
  • 移动端下弹框禁止背景滑动

    摘要:移动端下弹框禁止背景滑动茴字写法有很多种,找到最适合的才是好的。 移动端下弹框禁止背景滑动 茴字写法有很多种,找到最适合的才是好的。 以下下方法在一屛之内是可行的 body;html 设置overflow:hidden .overflow-hidden{ height: 100%; overflow: hidden; } // 弹出时 $(html, body,.pa...

    baukh789 评论0 收藏0
  • 移动端下弹框禁止背景滑动

    摘要:移动端下弹框禁止背景滑动茴字写法有很多种,找到最适合的才是好的。 移动端下弹框禁止背景滑动 茴字写法有很多种,找到最适合的才是好的。 以下下方法在一屛之内是可行的 body;html 设置overflow:hidden .overflow-hidden{ height: 100%; overflow: hidden; } // 弹出时 $(html, body,.pa...

    G9YH 评论0 收藏0
  • Android酷炫动画效果

    摘要:高级特效之酷炫抢红包金币下落动画最近项目需求要求做一个抢红包特效。使用动画让页面跳转更炫酷中引入了很多炫酷的动画效果,便是其中一种。 Android自定义View:一个精致的打钩小动画 一个精致的打钩动画。 Android 自定义水平进度条圆角进度 项目中实现进度条进度过程中显示圆角样式 ViewPager系列之 仿魅族应用的广告BannerView 前言 Banner广告位是APP ...

    scq000 评论0 收藏0
  • 懒加载、瀑布流和LightBox实现图片搜索效果

    摘要:无非就是获取用户输入的获取图片信息组装填充页面数据瀑布流布局处理在页面滚动时判断最后一张图片是否可见,如果是则重复以上内容查看源码 开始 做一个小项目,算是对js和jQuery的一次练习吧。 图片资源来自这个网站(上面有很多高清图片关键还是免费下载的):https://unsplash.com/ 项目具体效果可以点这里:https://bjw1234.github.io/ima......

    rainyang 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<