HTML JS 弹层后底部页面禁止滚动处理

1.打开新页面时需要禁止鼠标滚轮,禁止页面滑动;

在调用显示层时加上这句js代码就可以了:
document.documentElement.style.overflow = "hidden";
关闭层的时间别忘了在加上这句:
document.documentElement.style.overflow = "";

2.设置滚轮原来位置

var top_temp = $(document).scrollTop()||document.documentElement.scrollTop || document.body.scrollTop;
window.parent.scrollTo(0,top_value);
时间: 2024-11-06 03:55:19

HTML JS 弹层后底部页面禁止滚动处理的相关文章

微信小程序-06-详解介绍.js 逻辑层文件-注册页面

上一篇介绍的是 app.js 逻辑层文件中注册程序,对应的每个分页面都会有的 js 文件中 page() 函数注册页面 微信小程序-06-详解介绍.js 逻辑层文件-注册页面 宝典官方文档: https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html 今天开始深度学习编程语法,虽然大部分是拷贝官方文档,代码类都是我自己敲的,希望能自己敲一遍表格里的内容,熟悉一下操作 页面 Page Page(Object) Page(

vue.js 弹层

<div class="open-box"  v-if="SystemShow" @click="ColseShow">            <div class="open-box-content">                <h3>系统提示</h3>                <p>系统检测到您是天下医家的医护人员                   

JS弹出层遮罩,隐藏背景页面滚动条细节优化

做过弹层组件的童鞋应该都考虑过特殊情况下取消页面滚动条,让其不能滚动,这样用户体验会好很多,当弹层内容超出屏幕展现范围的时候在弹层上面增加滚动条来查看全部内容. 一.去除滚动条方法给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性样式中需要对IE6.7及其它浏览器用hack辨别,这是因为当页面拉到下面时如果html或body被overflow:hidden,透明弹层下面的页面就会被部分正常隐藏,通过透明看到的一片的灰度

js几个常用的弹层

js弹层技术很常见,自己每次用上网找,一找一大堆. 对比了几种,考虑通用性和易用性,这里记录两个. jQueryUI的http://jqueryui.com/dialog/#modal-form artdialog的.可以直接百度之. https://code.google.com/p/artdialog/ http://www.mb5u.com/jscode/html/ajax/426_artDialog2_0_4/

[vuejs] vue2.0-layer-mobile移动端弹层

vue2.0-layer-mobile移动端弹层 本次组件升级支持slot内容分发功能,实现高定制内容风格的弹层 安装方法 npm install vue2-layer-mobile -S 初始化 import layer from 'vue2-layer-mobile' Vue.use(layer) 该组件是基于开源插件layer-mobile用vue重新改写的,并且扩展了一些便捷方法 具体的API与layer-mobile高度保持一值,大家可以放心使用 组件使用 // 普通使用 <layer

基于jquery扩展的弹层控件

漂亮且超好用的弹出层事件类JS代码,支持各种对话框.弹出层等,弹出层可拖拽移动且拖拽流畅,浏览器兼容良好.可自定义内容.标题.宽高.按钮.和绑定相对应的事件简单方便的实现弹层,实现添加数据或显示详细信息等功能. 下面跟着我的步伐走 (1)准备好要显示的内容,这不仅仅是内容,也可以是html代码 (2)准备好内容之后,要记得给它取个响亮的标题,明确下主题,当然也可以不需要 (3)是不是觉得有些时候确定和取消这两个家伙没必要出现,如果不用它们可以将舍弃,不填他们就好了 是不是很简单,还在等什么,快来

layui中从子窗口传递数据到父窗口,第三个子弹层的值传给第二个弹层

最近做一个项目的需要多个弹层,每个弹层中还需要数据传递, 大概如图,看图自己应该明白 如何在在b页面选择好的值传给a页面的问题,这个问题我百度了好久都没有解决 后来参考了文档 http://fuxiao.io/practice/docs/#/layui/layer/iframes 加上自己理会,终于解决问题了,这个文档看了好几次还是不太明白(个人理解能力差),后来加班自己边动手边理解,解决问题了 上代码 主页面(top.html)的代码 <!DOCTYPE html> <html lan

弹出遮罩层后禁止滚动效果

弹出遮罩层后,手指在手机上上下滑动 遮罩层下的页面出现滑动.下面代码解决这个问题 (1)触摸后不产生事件 //遮罩层禁止滚动 $('.searbox_mask_byInteg').bind("touchmove", function (e) { e.preventDefault(); }); (2)body不出现滚动条 $("body,.main").height($(window).height()).css({ "overflow-y": &

很牛的js弹出层-artDialog4.1.2

[转]很牛的js弹出层-artDialog4.1.2 博客分类: javascript javascript 转自:http://www.iteye.com/topic/1117866 Sharpleo 写道 先让我们看看他提供的几种皮肤吧  功能: Java代码   1. 传入字符串 art.dialog({ content: '我支持HTML' }); 效果: Java代码   2. 传入HTMLElement 备注:1.元素不是复制而是完整移动到对话框中,所以原有的事件与属性都将会保留 2