关闭弹出框后禁止页面滚动以及去掉滚动条避免页面内容偏移
- 格式:docx
- 大小:22.78 KB
- 文档页数:4
移动端页⾯弹出框滚动,底部body锁定,不滚动微信⽹页禁⽌回弹效果需求:页⾯有弹出层菜单,当弹出层菜单超出屏幕可视区域时,不能滚动。
加上滚动后,底部body的滚动事件如何禁⽌,加上了overflow:hidden;还是不可⽤。
如下图:地区弹出框可以滚动,⽽底部的body不随着滚动。
参考⽹址:动态的改变body的样式,测试了可⾏var scrollTop = $body.scrollTop();//body设置为fixed之后会飘到顶部,所以要动态计算当前⽤户所在⾼度$body.css({'overflow':'hidden','position': 'fixed','top': scrollTop*-1});$loadMask.css('top',scrollTop);//设置遮罩层top值/*取消后设置回来*/$body.css({'overflow':'auto','position': 'static','top': 'auto'});另:微信页⾯会出现下拉回弹的情况,这个会有些影响。
以下是转载warning:较完美,意思就是不完美。
如果朋友们有完美的解决⽅案,⿇烦给我留⾔。
谢谢哈。
=============我是华丽丽的分隔线===============今天被提了⼀个需求:页⾯在微信浏览器中禁⽌下拉露底。
如:不能出现下图这种情况。
理由未明,反正需求就是这个。
为了解决这个问题,当然就得问度娘啦。
⽹上提供的解决⽅法基本是:这种是最坑爹的答案,虽然是把下拉弹性效果禁⽌了,可是也把页⾯⾥的滚动条禁⽌了,导致⽹页不能滚屏。
经过了解。
微信下拉弹性效果其实是浏览器本⾝的⼀种特性,为什么浏览器的设计者要设计这种特性暂不可知,知道的朋友们⿇烦告诉我⼀声哈。
窗口拦截功能怎么关闭窗口拦截功能是指一些软件或浏览器插件提供的一种功能,它可以阻止某些弹出窗口或广告窗口的弹出,从而提升用户的浏览体验。
然而,有些时候用户可能需要暂时关闭窗口拦截功能,以便访问特定网站或使用某些功能。
下面是一些关闭窗口拦截功能的方法。
1. 浏览器设置:大多数浏览器都提供了关闭窗口拦截功能的选项。
用户可以在浏览器的设置或选项菜单中查找该功能,并勾选或取消勾选相关选项。
例如,在Google Chrome浏览器中,用户可以点击右上角的菜单按钮,选择“设置”选项,然后在“隐私和安全性”部分找到“内容设置”,在其中的“弹出窗口”部分可以选择是否允许弹出窗口。
2. 浏览器插件:有些用户使用了专门的浏览器插件来拦截广告弹窗。
在这种情况下,关闭窗口拦截功能通常可以通过禁用或卸载相应的插件来实现。
用户可以在浏览器的扩展或插件管理页面中找到相应的插件,然后选择禁用或卸载。
3. 快捷键操作:某些窗口拦截功能软件或浏览器插件提供了快捷键来方便用户临时关闭窗口拦截功能。
用户可以在软件或插件的设置中查找相关选项,并设置一个快捷键,通过按下快捷键即可关闭或打开窗口拦截功能。
这种方法可以在需要关闭拦截功能时非常方便。
4. 临时例外列表:有些窗口拦截功能提供了临时例外列表的功能。
用户可以将特定网站加入到例外列表中,以允许这些网站的弹窗正常显示。
用户可以在软件或插件的设置中找到相关选项,然后将需要例外的网站添加进去。
需要注意的是,这种方法只是针对特定网站的,其他网站的弹窗仍然会被拦截。
5. 联系软件支持:如果用户遇到无法关闭窗口拦截功能的问题,可以通过邮件或在线客服联系软件或插件的技术支持团队,向他们咨询解决方法。
提供详细的问题描述,并附上相关的截图或操作步骤,可以更好地帮助技术支持团队理解问题并提供解决方案。
总之,关闭窗口拦截功能可以通过调整浏览器设置、禁用插件、使用快捷键操作、添加例外列表或联系技术支持来实现。
弹窗Modal实现和有滚动条偏移解决方法弹窗Modal实现和有滚动条偏移解决方法弹窗也叫modal(模态)在网页设计中是一个常见的功能。
实现方法也不会太复杂,可以通过css实现居中(bootstrap 的modal是使用靠上边距来实现),然后JS控制点击显示和消失。
在弹窗中也许你会发现一个问题,就是当页面有滚动条时,点击弹窗可能需要隐藏滚动条,这时内容会变宽,本文来自于江水提供了三种解决方法,收益匪浅,感谢。
弹窗的实现原理和方法弹窗通常就是两部分,一部分是半透明的背景遮罩,另一部分就是承载主体内容的区域。
当点击某个按钮或者某个地方触发,将隐藏的遮罩和内容通过某种动画效果显示出来。
然后点击内容中的关闭或者遮罩区域,就会将遮罩和内容通过某种动画效果隐藏起来。
所以,实现弹窗第一步,就是要写结构和CSS。
弹窗的html 结构和CSS既然知道实现方法,一般的结构主要有下面两种(分情况使用):第一种,将内容块独立出来,再声明一个.overlay 结构用来做背景遮罩。
结构如下:...这样的话,就可以为.overlay 结构设置半透明的背景图片或者使用rgba 的背景,然后为.box-login 应用绝对居中的布局模式或者使用js 动态计算宽高或者位置。
(当然,这种方法的兼容性IE8+ 特别在乎的,可以使用JS 来计算位置,以及用半透明的gif 图片当背景)。
这种结构的优势是,遮罩层可以被复用,任何需要弹窗的场景,都可以直接用overlay 这个遮罩层,twitter 等用的就是这种,也推荐这种。
具体代码直接看下面的用jsfiddle 做的Demo第二种,将内容块包裹进.overlay 结构中。
结构如下:...这种结构更加独立一些与其他结构相区别,用JS 来控制也比较统一比较简单,也比较方便用JS 等插件生成。
fancybox 就是生成这种结构来实现弹窗。
但是这里需要注意,由于内容块是被包裹在overlay 层的,所以要实现点击overlay 层取消弹窗的效果,需要在内容块中阻止单击或者其他有关事件的冒泡,这样在内容块中的操作,就不会触发取消弹窗的效果了。
VB禁⽌移动窗⼝--VB禁⽌移动窗⼝--禁⽌⼀个窗⼝被移动最简单的⽅法是设置Form的Moveable属性为False,这样就⽆法拖动标题栏来改变窗⼝的位置了,同时系统菜单的“移动”命令变成了灰⾊,除此之外,还有两种⽅法也可禁⽌移动窗⼝。
1.拦截拖动标题栏的消息当⽤户在标题栏的空⽩处上按下会产⽣WM_NCLBUTTONDOWN消息和HTCAPTION附加消息,我们可以拦截这个消息来防⽌⽤户通过拖动标题栏来移动窗⼝,此外还要拦截系统菜单的“移动”命令,所以我们还要处理WM_SYSCOMMAND消息,代码如下:'Form1中'-----------------------------------------------------------Private Sub Form_Load()Me.ShowhWindow = Me.hWndOldWindowProc = SetWindowLong(hWindow, GWL_WNDPROC, AddressOf WindowProc)End SubPrivate Sub Form_Unload(Cancel As Integer)Call SetWindowLong(hWindow, GWL_WNDPROC, OldWindowProc)End Sub'Module1中'-----------------------------------------------------------Option ExplicitDeclare Function GetWindowLong Lib "user32" Alias "GetWindowLongA" (ByVal hWnd As Long, ByVal nIndex As Long) As LongDeclare Function SetWindowLong Lib "user32" Alias "SetWindowLongA" (ByVal hWnd As Long, ByVal nIndex As Long, ByVal dwNewLong As Long) As LongDeclare Function CallWindowProc Lib "user32" Alias "CallWindowProcA" (ByVal lpPrevWndFunc As Long, ByVal hWnd As Long, ByVal Msg As Long, ByVal wParam As Long, ByVal lParam As Long) As LongPublic Const GWL_WNDPROC = (-4)Public Const WM_NCLBUTTONDOWN = &HA1Public Const WM_SYSCOMMAND = &H112Public Const HTCAPTION = 2Public Const SC_MOVE = &HF010&Public hWindow As LongPublic OldWindowProc As Long'⼦类消息Public Function WindowProc(ByVal hWnd As Long, ByVal uMsg As Long, ByVal wParam As Long, ByVal lParam As Long) As Long'拦截拖动标题栏消息If uMsg = WM_NCLBUTTONDOWN And wParam = HTCAPTION Then Exit Function'拦截系统菜单的“移动”消息If uMsg = WM_SYSCOMMAND And wParam = SC_MOVE Then Exit FunctionWindowProc = CallWindowProc(OldWindowProc, hWnd, uMsg, wParam, lParam)End Function2.修改窗⼝结构全⾯禁⽌移动窗⼝上⾯两种⽅法都可以禁⽌移动⼀个窗⼝,但是这种⽅法只能欺骗⽤户,⽽⽆法欺骗操作系统,即它不能防⽌⽤户通过其它第三⽅⼯具来改变⼀个窗⼝的位置,如调⽤MoveWindow或SetWindowPos函数来改变⼀个窗⼝的位置,然⽽下⾯这种⽅法就可以。
disablescroll实现原理disablescroll是一种JavaScript技术,用于禁止网页滚动。
它通过操作DOM元素的CSS样式或事件监听来实现禁止滚动的效果。
下面将详细阐述disablescroll的实现原理。
一、CSS样式禁止滚动1. overflow属性CSS中的overflow属性用于控制元素内容溢出时的处理方式。
它有四个值可选:visible(默认值,允许溢出)、hidden(隐藏溢出部分)、scroll(显示滚动条,即使没有溢出)和auto(根据内容是否溢出,自动决定是否显示滚动条)。
为了禁止网页滚动,可以通过为body元素添加以下CSS样式来实现:```body {overflow: hidden;}```这样设置后,当网页内容溢出时,浏览器不会显示滚动条,从而实现了禁止滚动的效果。
需要注意的是,这种方式仅限于禁止网页整体的滚动,无法对指定元素进行滚动限制。
2. position: fixed另一种通过CSS样式禁止滚动的方法是使用position: fixed属性。
position属性用于设置元素的定位方式,其中fixed用于将元素相对于视口固定定位。
为了禁止滚动,可以为body元素添加以下CSS样式:```body {position: fixed;}```这样设置后,无论网页内容如何变化,body元素始终固定在视口中,不会出现滚动行为,从而实现了禁止滚动的效果。
需要注意的是,这种方式会导致网页内容消失,因此通常需要结合其他技术来调整网页布局,以保证内容的可见性。
二、事件监听禁止滚动除了通过CSS样式,还可以通过JavaScript事件监听来禁止滚动。
以下是两个常用的事件监听方式:1.阻止默认事件DOM事件模型允许开发者在元素上绑定事件,并通过JavaScript函数响应事件。
JavaScript中的事件对象提供了用于阻止默认事件行为的方法。
为了禁止滚动,可以在document或指定元素上添加如下代码:```javascriptdocument.addEventListener('touchmove', function(event) {event.preventDefault();}, { passive: false });document.addEventListener('mousewheel', function(event) { event.preventDefault();}, { passive: false });```以上代码分别监听了touchmove和mousewheel事件,并通过调用事件对象的preventDefault()方法来阻止事件的默认行为。
取消浮窗的操作方法浮窗是指在电脑、手机等设备上悬浮显示的一种窗口形式。
有时候浮窗可能会打扰我们的工作或者使用体验,因此取消浮窗是很常见的需求。
接下来我将为大家介绍一些取消浮窗的方法。
一、关闭浮窗软件很多浮窗是通过特定的软件实现的,所以关闭浮窗就可以在关闭这些软件时实现。
具体的关闭方法有以下几种:1.1 通过任务管理器关闭在电脑上,可以通过任务管理器来关闭浮窗软件。
首先,按下Ctrl+Shift+Esc 打开任务管理器,在“进程”选项卡中查找相关的浮窗软件进程,选中并点击“结束任务”即可关闭。
1.2 通过系统通知栏关闭有些浮窗软件会在系统通知栏图标中提供关闭选项,我们可以右击系统通知栏中的相关图标,选择“退出”或“关闭”来关闭浮窗软件。
1.3 通过任务栏关闭一些浮窗软件会在任务栏中显示相关的图标,我们可以右击任务栏中的浮窗图标,选择“关闭”来关闭浮窗软件。
二、禁用浮窗权限除了通过关闭浮窗软件来取消浮窗外,我们还可以通过禁用浮窗权限的方式来达到相同的效果。
这种方法适用于操作系统提供了相关设置选项的情况。
2.1 在系统设置中禁用对于安卓手机,我们可以在系统设置中找到“应用管理”或类似选项,然后找到对应的浮窗软件,点击进入后,找到“权限管理”或“其他权限”等选项,在其中禁用浮窗权限即可。
2.2 在应用设置中禁用有些浮窗软件也提供了自己的设置选项,我们可以打开该软件,点击进入设置页面,在其中找到“悬浮窗权限”或类似选项,关闭该权限即可。
三、卸载浮窗软件如果以上方法都无法取消浮窗,我们可以考虑卸载浮窗软件。
具体方法如下:3.1 电脑上卸载软件在电脑上,我们可以通过以下几个途径来卸载浮窗软件:(1) 打开“控制面板”,找到“程序”或“应用程序”,搜索并找到浮窗软件,点击卸载即可。
(2) 使用安装软件时附带的卸载程序,在开始菜单或应用程序文件夹中找到相关的卸载程序,双击运行即可。
(3) 如果以上方法都无法卸载,我们可以尝试使用第三方卸载软件来彻底删除浮窗软件。
使用技巧怎么关闭弹窗
关闭弹窗的技巧可以分为以下几种:
1. 使用浏览器的内置功能: 大多数现代浏览器都提供了阻止弹窗的功能。
在浏览器的设置菜单中,可以找到“内容设置”或“隐私设置”选项,进入其中找到“弹出窗口”一项,选择“阻止”或“默认阻止即可屏蔽弹窗。
2. 使用浏览器插件: 某些浏览器插件可以帮助用户屏蔽弹窗。
例如,常用的广告屏蔽插件,如Adblock Plus、uBlock Origin 等,可以通过订阅过滤规则屏蔽大部分弹窗广告。
3. 使用任务管理器: 在Windows操作系统中,可以通过按下“Ctrl+Shift+Esc”快捷键打开任务管理器,然后切换到“进程”或“应用”选项卡,在列表中找到弹窗所对应的程序或进程,右键点击选择“结束任务”或“结束进程”即可关闭弹窗。
4. 使用浏览器的开发者工具: 大部分现代浏览器都提供了开发者工具,可以通过按下“F12”键或右键点击页面选择“检查”来打开开发者工具。
在开发者工具中,可以切换到“Elements”或“Elements”选项卡,在DOM树中找到弹窗所对应的元素,右键点击选择“删除”或“隐藏”即可关闭弹窗。
5. 使用防弹窗软件: 有一些专门的软件可以帮助屏蔽弹窗,如StopAd、AdGuard等。
这些软件通过自动识别和过滤弹窗,可以有效地阻止弹窗的出现。
总结起来,关闭弹窗的技巧多种多样,可以通过浏览器的内置功能、浏览器插件、任务管理器、浏览器的开发者工具或专门的防弹窗软件来实现。
用户可以根据具体情况选择适合自己的方法来关闭弹窗。
关闭浏览器弹出窗口拦截功能关闭浏览器弹出窗口拦截功能在日常的上网浏览中,我们经常会遇到一些弹出窗口,这些弹出窗口可能会打断我们的正常浏览体验,甚至会导致一些不必要的安全风险。
为了解决这个问题,许多浏览器都提供了关闭浏览器弹出窗口拦截功能。
关闭浏览器弹出窗口拦截功能是指浏览器在检测到有弹出窗口时,会自动拦截并阻止这些弹出窗口的出现。
这个功能的实现需要浏览器在后台运行时,通过监测浏览器窗口的状态来实现。
当浏览器检测到有弹出窗口时,会根据用户的设置进行相应的处理,用户可以选择关闭这些弹出窗口或者允许它们显示。
关闭浏览器弹出窗口拦截功能可以有效地提升用户的浏览体验和安全性。
首先,它可以避免一些广告弹窗的干扰,用户在浏览网页时不再频繁地遇到广告窗口,减少了不必要的打断。
其次,它可以有效防止一些钓鱼网站通过弹窗的方式进行欺诈行为,保护用户的个人信息和财产安全。
再次,关闭浏览器弹出窗口拦截功能还可以防止一些恶意软件和病毒通过弹窗的方式进行传播,有效提升了浏览器的安全性。
为了更好地使用关闭浏览器弹出窗口拦截功能,我们还可以进行一些相关的设置。
首先,在浏览器的参数设置中,用户可以自由选择是否开启或关闭弹窗拦截功能。
通常情况下,浏览器默认是开启这个功能的,用户可以根据自己的需要进行设置。
其次,在浏览器遇到弹窗时,用户也可以手动选择是否关闭这些弹窗。
如果用户认为某个网站的弹窗是有用的,可以选择允许它显示。
最后,用户还可以在浏览器的扩展程序中安装一些专门的广告拦截插件,进一步提升拦截弹窗的能力。
总之,关闭浏览器弹出窗口拦截功能是现代浏览器提供的一项非常实用的功能。
它可以有效提升用户的浏览体验和安全性,避免了一些不必要的打扰和安全风险。
同时,用户还可以根据自己的需求进行相应的设置,进一步提升关闭弹窗功能的效果。
使用这个功能可以让我们更加安心和愉快地上网浏览,享受到更好的网络体验。
纯css,div隐藏滚动条,保留⿏标滚动效果。
当我们的内容超出了我们的div,往往会出现滚动条,影响美观。
尤其是当我们在做⼀些导航菜单的时候。
滚动条⼀出现就破坏了UI效果。
我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留⿏标滚动的效果。
这⾥介绍⼀个简单的⽅法。
⼤体思路是在div外⾯再套⼀个div。
这个div设置overflow:hidden。
⽽内容div设置 overflow-y: scroll;overflow-x: hidden;然后再设置外层div的width⼩于内层div的width。
这个内层div其实是会出现滚动条的,所以不影响⿏标的滚动效果,⽽且我们看不到滚动条了。
内层div效果:套上外层div效果后:css代码:.nav_wrap{height: 400px;width: 200px;overflow: hidden;border: 1px solid #ccc;margin: 20px auto;}.nav_ul{height: 100%;width: 220px;overflow-y: auto;overflow-x: hidden;}.nav_li{border: 1px solid #ccc;margin: -1px;height: 40px;line-height: 40px;text-align: center;font-size: 12px;width: 200px;}.btn_wrap{text-align: center;}html代码:<div class= "nav_wrap"><ul class= "nav_ul"><li class="nav_li">我是菜单1</li><li class="nav_li">我是菜单2</li></ul></div>之前的⼀个项⽬中的菜单⽤到了这个技巧。
<html>
<style>
#delbtn
{
border: 0px;
width: 24px;
height: 24px;
background-image: url("../images/gdel.jpg"); background-repeat: no-repeat;
background-position: center;
}
#delbtn:hover
{
border: 0px;
width: 23px;
height: 24px;
background-image: url("../images/bdel.jpg"); background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
.black_overlay
{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
.white_content
{
display: none;
position: absolute;
top: 20%;
left: 10%;
width: 75%;
height: 59%;
padding: 5px15px5px15px;
border: 2pxsolidorange;
background-color: white;
z-index: 1002;
overflow: auto;
}
<style>
<script>
var htmlwidth;
$(document).ready(function () {
htmlwidth = $("html").width(); //获取页面html的宽度,它不包含滚动条的宽度
});
function ExpressDetail(ID) {
document.getElementById('body1').style.overflow= "hidden";//弹出框时隐藏滚动条document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
varfadewidth = $("#fade").width(); //获得遮罩层的宽度,其中包含滚动条的宽度
var scrollwidth = fadewidth - htmlwidth;//相减得到滚动条的宽度
$("body").css("margin-right",scrollwidth);/*隐藏滚动条时为防止页面位置偏移,设置html或者body的“margin-right”的宽度(我这里设置的是body)等于滚动条的宽度。
*/
$.ajax({
url: "../ashx/expressinfo.ashx?operater=detail&ID=" + ID + "",
type: "get",
dataType: "json",
contentType: "application/json",
success: function (datas) {}
});
}
function CloseDetail() {
/*关闭弹出框时设置body的滚动条出现*/
document.getElementById('body1').style.overflow = "scroll";
document.getElementById('light').style.display = 'none';
document.getElementById('fade').style.display = 'none';
$("body").css("margin-right", 0);/*关闭弹出框时为了防止页面位置偏移设置body的值为0,也就是初始化”margin-right”的值*/
}
</script>
<body>
<form>
<div><input type='button' class='button-radius' onclick='ExpressDetail(" + ID + ");' value='详情'/>
</div>
/*弹出层*/
<div id="light"class="white_content">
/*弹出框标题栏*/
<div id="light_title"style="width: 100%;">
/*弹出框标题栏*/
<div id="light_title_left"style="float: left; width: auto; font-size: 16px; font-family: '微软雅黑',Arial, Helvetica, sans-serif;">弹出框标题</div>
/*弹出框关闭按钮*/
<div id="light_title_right"style="float: right; width: auto; font-size: 16px;">
<input type="button"id="delbtn"onclick="CloseDetail();"/>
</div>
</div>
/*弹出框内容栏*/
<div id="light_content"style="margin-top: 30px; width: 100%;">内容层</div>
</div>
/*遮罩层*/
<div id="fade"class="black_overlay">
</div>
</form>
</body>
</html>
大体意思就是新建了一个包裹的结构,然后两个宽度相减得到滚动条的宽度,然后输出到
head 中。
当有弹窗发生之后,就为html 标签赋予相应的类来margin-right 一下,避免滚动条消失引起的内容偏移。