实现网页弹出框后背景不能滑动的效果

我们经常写遮罩层弹出框之类的效果,但是小编最近发现弹出框出现后,它覆盖的背景内容信息却可以滑动,体验很不好,那么如何禁止背景滑动

很简单的属性

弹出框出现后将body设为hidden
document.body.style.overflow = "hidden";
当关闭弹出框的时候body设为auto
document.body.style.overflow = "hidden";

这样就可以实现效果了,一般都是动态添加根据你的事件需求设置body的overflow属性就可以了

原文地址:https://www.cnblogs.com/nanjie/p/8966720.html

时间: 2024-08-17 05:16:11

实现网页弹出框后背景不能滑动的效果的相关文章

网页弹出框--播放视频

网页点击弹出框播放视频 1/准备好基础网页.重置样式表什么的都已经写好的网页 2/调入弹出框CSS样式 /*! * ui-dialog.css * Date: 2014-07-03 * https://github.com/aui/artDialog * (c) 2009-2014 TangBin, http://www.planeArt.cn * * This is licensed under the GNU LGPL, version 2.1 or later. * For details

利用z-index属性实现网页弹出框

java web应用开发过程中,有些用户操作需要以弹出框形式展示,今天对以往项目开发中的弹出框实现原理仔细分析了一下,使用CSS的z-index属性,可以实现简单的弹出框效果.具体原理: .mask{ z-index:900; position:fixed!important; position:absolute; left:0px; top:0px; width:100%; height:100%; background:#000; filter: alpha(opacity=45); opa

网页弹出框ClientScript,ScriptManager

网页调用客户端弹出框 this.ClientScript.RegisterStartupScript(this.GetType(), "message", "<script>alert('!');</script>"); ajax里要这么用. 有UpdatePanel 需要用下面的代码 ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(), "

asp.net弹出框后页面走样

1.去掉language='javascript' ,问题依旧 2.后面加上Response.Write("<script>document.location=document.location;</script>"); 这句话,试了一下,发现样式是没变化,但是页面是从新加载的,VIEWSTATE被清空了(这可不行,用户修改还没保存呢) 3.this.RegisterStartupScript("", "<script lan

PopupWindow弹出框与背景变暗的实现(附带动画效果)

效果图: 1,定义popupWindow 布局 2,在mainactivity.xml 中设置 用来显示 popupwindow的 布局 3,MainActivity当中 设置popupwindow的 监听事件 4 设置popupWindow 显示的动画效果 out_fromtop.xml in_fromtop.xml ok 下载源码  版权声明:本文为博主原创文章,未经博主允许不得转载.

menu-普通menu弹出框样式

今天接触到了menu弹出框样式.主要就是在theme下进行调整.现在把接触到的知识点总结一下. 在theme中,跟menu有关的几个属性如下 <item name="panelBackground">@android:drawable/menu_panel_color_funui</item> <item name="panelFullBackground">@android:drawable/menu_background_fi

cocos2dx2.2.2弹出框的实现

在上一篇文章中,我们利用CCEditBox实现了输入框功能,使我们在注册时可以输入用户名和密码.但是当用户名和密码的输入不符合规范时,我们应该怎样给与用户提示呢?下面我们就来介绍弹出框的实现方式. 我们的思路就是,创建一个模态层,将当前场景的内容盖住,然后在弹出层上给与用户相应的提示并提供一个关闭弹出层的按钮.首先,我们先来看一下效果. 这里的标题和具体提示信息需要是自定义的,才能满足不同场景的需要,而确定按钮只是用来关闭弹出层的,所以这个弹出框的主要元素并不多,实现起来也比较简单. 另外,还有

[Bootstrap]modal弹出框

写在前面 在实际开发中,为了友好,更需要一种美观的弹出框,js原生的alert,很难满足需求.这里推荐一个bootstrap的弹出框. 一个例子 先看效果吧 代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>模式弹出框</title> <meta name="viewport" content=&

bootstrap-js(六)弹出框

实例 为任意元素添加一小块浮层,用于存放非主要信息. 弹出框的标题和内容的长度都是零的话将永远不会被显示出来. 初始化 由于性能的原因,工具提示和弹出框的 data 编程接口(data api)是必须要手动初始化的. 在一个页面上一次性初始化所有弹出框的方式是通过 data-toggle 属性选中 <!DOCTYPE HTML><html><head><link href="/stylesheets/bootstrap.min.css" rel