弹出框滑动,底部不跟着滑动

弹出框里有滚动条,并且页面也有滚动条时,在弹出框内滑动时底部页面也会跟着滑动,试了下当弹出框出现时加上$(‘body‘).css({‘height‘,‘100%‘,‘overflow‘,‘hidden‘});不起作用,后来在弹出框上加上以下代码便起作用了。

$(‘body‘).css({
        ‘overflow‘:‘hidden‘,
        ‘position‘: ‘fixed‘,
        ‘top‘: scrollTop*(-1)
    });

弹出框关闭后,再恢复

$(‘body‘).css({
        ‘overflow‘:‘auto‘,
        ‘position‘: ‘static‘,
        ‘top‘: ‘auto‘
    });
时间: 2024-12-29 12:00:22

弹出框滑动,底部不跟着滑动的相关文章

jQuery+css3弹出框插件

先来看DEMO:https://codepen.io/jonechen/pen/regjGG 插件的开发很简单,运用了CSS3的动画效果,并且弹出框的内容可以自定义.插件的默认配置参数有三个: var defaults = { event: 'click', // 默认点击事件 dialogBox: 'selector', // 弹出框容器 hover: false, // 默认滑动事件关闭 } CSS部分: *{padding: 0; margin: 0; list-style: none;f

Bootstrap之javascript插件---弹出框(模态框)Modal

简介: 弹出框是一个经常使用的组件,一般用于弹出提示信息,确认信息,表单内容. 完整结构分析(可以没有头部和底部): 代码示例: <!-- 弹出框的头部 --> <div class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"&g

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

我们经常写遮罩层弹出框之类的效果,但是小编最近发现弹出框出现后,它覆盖的背景内容信息却可以滑动,体验很不好,那么如何禁止背景滑动 很简单的属性 弹出框出现后将body设为hidden document.body.style.overflow = "hidden"; 当关闭弹出框的时候body设为auto document.body.style.overflow = "hidden"; 这样就可以实现效果了,一般都是动态添加根据你的事件需求设置body的overflo

UIActionSheet底部弹出框

<底部弹出框来提示用户信息>    1.遵循代理方法<UIActionSheetDelete>    2.调用放法 [UIActionSheet *sheet=[UIActionSheet alloc]initWithTitle:@“通关了!” delegate:self cancelButtonTitle:@“取消” destructiveButtonTitle:@“购买” otherButtonTitles:@“购买1”,@“购买2”,nil]    [sheet showIn

通用的popupwindow底部弹出框

前段时间做项目的时候,有几个底部弹出框,当时因为忙着赶进度所有就单独写了好几个popupwindow.后来就想着怎么实现一个通用的PopupWindow工具类 就是在要用到的时候创建该工具类的对象,并传入相应的框体布局,就可以实现了. 先看看效果,下面的两是调用同一个PopupWindowUtils创建的:       ok,先看看popupWindow的具体实现 import android.app.Activity; import android.graphics.drawable.Colo

android popwindow仿微信右上角弹出框,dialog底部显示

仿微信右上角弹出框 1.利用popwindow实现 2.popwindow的位置居于右上角 新建,弹出popwindow: /** 弹popwindow **/ <span style="white-space:pre"> </span>tv = (TextView) findViewById(R.id.textView1); <span style="white-space:pre"> </span>view_pop

弹出框始终保持居中(包括有滚动条和窗体缩放时)

之前写的代码,都是在当前窗口位于居中,可是一旦窗口缩小或者放大都不是位于居中的位置了,但是一直想写的一个类似于alert弹出窗口的效果. 原理很简单: 获取当前屏幕(窗体)的宽度和高度,因为不同浏览器的窗体大小是不一样的.有了这个,可以计算出来横向居中和垂直居中的坐标.但是滑动了滚动条怎么依然横向居中和垂直居中呢?这个时候就要获取当前窗体距离页面顶部的高度和横向滚动条移动的宽度,加到刚刚的y轴坐标即可. $(document)是获取整个网页的,$(window)是获取当前窗体的,这个要搞清楚.

解决模拟弹出框情况下文档滚动的问题

用div元素来模拟弹出框很普遍,它可以自行定制各式各样的弹出框.弹出框一般用的是fixed绝对定位,也就是相对于浏览器窗口定位. 在文档高度大于窗口高度的情况下,弹出框会存在一个问题.当弹出框在显示的时候,滚动鼠标(PC端)或滑动页面(移动端)会导致文档滚动.还有在弹出框的高度也大于窗口高度时,滚动鼠标或滑动页面会先滚动弹出框,直到滚动条到头或到尾时,继续滚动弹出框仍然会导致文档的滚动. 这个问题会导致用户在隐藏弹出框返回时,页面显示不是显示弹出框前的位置.解决办法是给这个文档动态设置overf

Bootstrap方法为页面添加一个弹出框

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 弹出框(Popover)插件</title> <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap