关于html页面,点击弹出属性是fixed 的div的问题

大致是这样

 <body>
<header></header>
<div class="container"></div>
<div class="pop" style="position:fixed; top:50%; "></div>

<footer></footer>

</body>

然后我点击container里的一个按钮,会弹出pop。但是为什么每次点击出现pop后,页面会先跳到顶部,请问怎样让页面不跳动?pop的div就在当前位置出现。当然我需要全屏滚动的。
求大神回答,谢谢!

2个回答

按钮是什么?连接增加了href="#",看你的描述应该是,你要在click事件中return false阻止执行默认的href="#"操作,这个就是跳转到顶部去的


<a href="#" onclick="xxxxx();return false;">click</a>
showbo
支付宝加好友偷能量挖 回复zilan830: 记得采纳。。嘿嘿
大约 4 年之前 回复
zilan830
zilan830 我只想说,大神,一语道破了天机!!!膜拜!
大约 4 年之前 回复

推荐使用boostrap试试,有一个model是专门做你说的这种的。

http://v3.bootcss.com/javascript/#modals

dcxy0
Q544471255 回复zilan830: 发错了
大约 4 年之前 回复
dcxy0
Q544471255 回复zilan830: igreenjsq.mobi
大约 4 年之前 回复
zilan830
zilan830 回复dcxy0:介、、、我估计我还是哪里样式写得有问题,自己不知道,我再瞧瞧。我感觉设置这个,会使得本来很简单的东西变复杂了。
大约 4 年之前 回复
dcxy0
Q544471255 回复zilan830: 设置一个setTimeout试试。
大约 4 年之前 回复
zilan830
zilan830 回复dcxy0: 还是木有用啊。。。。还是会调到顶部,我都要哭了。
大约 4 年之前 回复
dcxy0
Q544471255 回复zilan830: 大致这样操作:弹出前,先获取滚动条到顶部的距离,然后在弹出之后,立刻就设置给新弹出来的div.
大约 4 年之前 回复
dcxy0
Q544471255 回复zilan830: 你要自己实现的话,你跳到顶部是因为你没控制高度,你试试控制一下弹出来的div的距顶部的距离。
大约 4 年之前 回复
zilan830
zilan830 没有用bootstrap,因为太重了。对于这个,我是不是有什么地方没有注意到呢?
大约 4 年之前 回复
zilan830
zilan830 没有用bootstrap,因为太重了。对于这个,我是不是有什么地方没有注意到呢?
大约 4 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
标签选择器不起作用?
-
点击DIV外任意地方隐藏此DIV 或点击iframe子页面中隐藏 父页面DIV
-
HTML5中css的position:fixed属性问题
-
iscroll解决ios中fixed属性的兼容问题具体是如何实现的
-
wap页面,如何解决虚拟键盘弹出造成的页面问题?
-
flutter的类似于css里面的fixed 固定定位控件是什么??
-
关于ElementUI中根据某一行中某一列数据设置按钮的禁用和不禁用
-
h5 开发 嵌入app中 iOS 弹出软键盘 页面出现空白
-
ccf小中大25分 孩子要哭了
-
在pat上得1020题,测试点三运行超时不知道是哪儿错了
-
网页设计,在IE浏览器上可以正常输入,但其他浏览器上无法正常使用输入栏。大神们帮忙看看,马上要交的作业,急。
-
[Vue warn]: Error compiling template 請問如何處理
-
加了setiosflags(ios::fixed)<<setprecision<<(6),输出为啥变了?
-
移动端页面底部导航被浏览器工具栏遮盖有好的解决办法吗
-
div relative z-index:4会遮挡fixed z-index:999的原因是什么?
-
bootstrap怎么将radio分组,组间不互相影响?
-
html 左侧内容上下滚动 右侧列表固定的问题
-
HTML初学者问题,求大神告诉我原因所在
-
如何实现 table 中单元格有最大宽度并且可以换行,外面加带一个大小固定的带滚动条的div。
-
程序员实用工具网站
目录 1、搜索引擎 2、PPT 3、图片操作 4、文件共享 5、应届生招聘 6、程序员面试题库 7、办公、开发软件 8、高清图片、视频素材网站 9、项目开源 10、在线工具宝典大全 程序员开发需要具备良好的信息检索能力,为了备忘(收藏夹真是满了),将开发过程中常用的网站进行整理。 1、搜索引擎 1.1、秘迹搜索 一款无敌有良心、无敌安全的搜索引擎,不会收集私人信息,保...
我花了一夜用数据结构给女朋友写个H5走迷宫游戏
起因 又到深夜了,我按照以往在csdn和公众号写着数据结构!这占用了我大量的时间!我的超越妹妹严重缺乏陪伴而 怨气满满! 而女朋友时常埋怨,认为数据结构这么抽象难懂的东西没啥作用,常会问道:天天写这玩意,有啥作用。而我答道:能干事情多了,比如写个迷宫小游戏啥的! 当我码完字准备睡觉时:写不好别睡觉! 分析 如果用数据结构与算法造出东西来呢? ...
别再翻了,面试二叉树看这 11 个就够了~
写在前边 数据结构与算法: 不知道你有没有这种困惑,虽然刷了很多算法题,当我去面试的时候,面试官让你手写一个算法,可能你对此算法很熟悉,知道实现思路,但是总是不知道该在什么地方写,而且很多边界条件想不全面,一紧张,代码写的乱七八糟。如果遇到没有做过的算法题,思路也不知道从何寻找。面试吃了亏之后,我就慢慢的做出总结,开始分类的把数据结构所有的题型和解题思路每周刷题做出的系统性总结写在了 Github...
让程序员崩溃的瞬间(非程序员勿入)
今天给大家带来点快乐,程序员才能看懂。 来源:https://zhuanlan.zhihu.com/p/47066521 1. 公司实习生找 Bug 2.在调试时,将断点设置在错误的位置 3.当我有一个很棒的调试想法时 4.偶然间看到自己多年前写的代码 5.当我第一次启动我的单元测试时 ...
接私活必备的 10 个开源项目!
点击蓝色“GitHubDaily”关注我加个“星标”,每天下午 18:35,带你逛 GitHub!作者 | SevDot来源 | http://1t.click/VE8W...
GitHub开源的10个超棒后台管理面板
目录 1、AdminLTE 2、vue-Element-Admin 3、tabler 4、Gentelella 5、ng2-admin 6、ant-design-pro 7、blur-admin 8、iview-admin 9、material-dashboard 10、layui 项目开发中后台管理平台必不可少,但是从零搭建一套多样化后台管理并不容易,目前有许多开源、免费、...
100 个网络基础知识普及,看完成半个网络高手
欢迎添加华为云小助手微信(微信号:HWCloud002或HWCloud003),输入关键字“加群”,加入华为云线上技术讨论群;输入关键字“最新活动”,获取华为云最新特惠促销。华为云诸多技术大咖、特惠活动等你来撩! 1)什么是链接? 链接是指两个设备之间的连接。它包括用于一个设备能够与另一个设备通信的电缆类型和协议。 2)OSI 参考模型的层次是什么? 有 7 个 OSI 层:物理...
中国最顶级的一批程序员,从首富到首负!
过去的20年是程序员快意恩仇的江湖时代通过代码,实现梦想和财富有人痴迷于技术,做出一夜成名的产品有人将技术变现,创办企业成功上市这些早一代的程序员们创造的奇迹引发了一浪高...
分享靠写代码赚钱的一些门路
作者 mezod,译者 josephchang10如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。今天给大家分享一个精彩...
对计算机专业来说学历真的重要吗?
我本科学校是渣渣二本,研究生学校是985,现在毕业五年,校招笔试、面试,社招面试参加了两年了,就我个人的经历来说下这个问题。 这篇文章很长,但绝对是精华,相信我,读完以后,你会知道学历不好的解决方案,记得帮我点赞哦。 先说结论,无论赞不赞同,它本质就是这样:对于技术类工作而言,学历五年以内非常重要,但有办法弥补。五年以后,不重要。 目录: 张雪峰讲述的事实 我看到的事实 为什么会这样 ...
世界上最好的学习法:费曼学习法
你是否曾幻想读一遍书就记住所有的内容?是否想学习完一项技能就马上达到巅峰水平?除非你是天才,不然这是不可能的。对于大多数的普通人来说,可以通过笨办法(死记硬背)来达到学习的目的,但效率低下。当然,也可以通过优秀的学习法来进行学习,比如今天讲的“费曼学习法”,可以将你的学习效率极大的提高。 费曼学习法是由加拿大物理学家费曼所发明的一种高效的学习方法,费曼本身是一个天才,13岁自学微积分,24岁加入曼...
学Linux到底学什么
来源:公众号【编程珠玑】 作者:守望先生 网站:https://www.yanbinghu.com/2019/09/25/14472.html 前言 ​我们常常听到很多人说要学学Linux或者被人告知说应该学学Linux,那么学Linux到底要学什么? 为什么要学Linux 在回答学什么之前,我们先看看为什么要学。首先我们需要认识到的是,很多服务器使用的是Linux系统,而作为服务器应...
深入理解C语言指针
一、指针的概念 要知道指针的概念,要先了解变量在内存中如何存储的。在存储时,内存被分为一块一块的。每一块都有一个特有的编号。而这个编号可以暂时理解为指针,就像酒店的门牌号一样。 1.1、变量和地址 先写一段简单的代码: void main(){ int x = 10, int y = 20; } 这段代码非常简单,就是两个变量的声明,分别赋值了 10、20。我们把内存当做一个酒店,而每个房间就...
C语言实现推箱子游戏
很早就想过做点小游戏了,但是一直没有机会动手。今天闲来无事,动起手来。过程还是蛮顺利的,代码也不是非常难。今天给大家分享一下~ 一、介绍 开发语言:C语言 开发工具:Dev-C++ 5.11 日期:2019年9月28日 作者:ZackSock 也不说太多多余的话了,先看一下效果图: 游戏中的人物、箱子、墙壁、球都是字符构成的。通过wasd键移动,规则的话就是推箱子的规则,也就不多说了。 二、代...
面试官:兄弟,说说基本类型和包装类型的区别吧
Java 的每个基本类型都对应了一个包装类型,比如说 int 的包装类型为 Integer,double 的包装类型为 Double。基本类型和包装类型的区别主要有以下 4 点。
焦虑的互联网人及35岁定律
一、35岁定律 好像现在整个互联网行业都在贩卖焦虑,从之前的30岁淘汰,到现在的35岁,到最新的39.9岁,你会发现,年龄趋势怎么在上升啊,对了兄弟,就是那一批人嘛,他们每年涨一岁,可不就是焦虑年龄越来越大了。 最早我看到的新闻是说,第一批互联网人都赶上了好时候,现在差不多五十岁左右,要么创业成功,要么在大公司做股东,反正都是实现了经济自由的一波人,包括马老师,都是那一拨。 那剩下的呢?有人...
8000字干货:那些很厉害的人是怎么构建知识体系的
本文约8000字,正常阅读需要15~20分钟。读完本文可以获得如下收益: 分辨知识和知识体系的差别 理解如何用八大问发现知识的连接点; 掌握致用类知识体系的构建方法; 能够应用甜蜜区模型找到特定领域来构建知识体系。 1. 知识体系?有必要吗? 小张准备通过跑步锻炼身体,可因为之前听说过小腿变粗、膝盖受伤、猝死等等与跑步有关的意外状况,有点担心自己会掉进各种坑里,就在微信上问朋友圈一直晒跑步...
为什么我不建议你在当前购买 5G 手机
首发于公众号:BaronTalk,欢迎关注 每年的八九月份都是各大厂商发布年自己旗舰机的时候,最近 vivo、oppo、小米、华为、苹果接连发布了自己的年度旗舰,这当中除了苹果,其它厂商均发布了 5G 版本手机。恰逢国庆,势必会迎来一波换机潮,而各大厂商发布的 5G 手机很可能会成为很多同学的首选,今天我要来给准备购买 5G 手机的同学泼泼冷水。 先抛出观点:**对于普通消费者,当前不适合购...
中国物联网激荡20年
故事还要从24年前那个夏天说起。 ** 1 ** 1995年的夏天,美国西海岸有一个中年人出版了一本叫《未来之路》的书籍,这本书是大家了解信息高速公路全部面目乃至21世纪人类生活面貌的入门书。在这本书中,这个中年人多次提到“物物互联”的设想。但是由于当时网络技术与传感器应用水平的限制,中年人朦胧的“物联网”理念没有引起重视。对了,这个中年人后面做了十几次世界首富! 说回国内,那时风还没有起来,科技...
十大优秀编程项目,让你的简历金光闪闪
全文共3241字,预计学习时长6分钟 被问到如何学习编程时,最常听到的问题就是:“有没有什么新项目的好点子?” 一些老套的答案有:“做一个象棋游戏”或者“命令行界面”。 这些答案没有错,但这些例子不符合现代编程的需要。现代软件编写需要经常使用软件服务化(SaaS)和网络应用,这意味着程序员需要了解如何在线编程。 用户网站或应用程序的编程需要服务器、身份验证和数据库,这个过程十分复杂。它...
第二弹!python爬虫批量下载高清大图
文章目录前言下载免费高清大图下载带水印的精选图代码与总结 前言 在上一篇写文章没高质量配图?python爬虫绕过限制一键搜索下载图虫创意图片!中,我们在未登录的情况下实现了图虫创意无水印高清小图的批量下载。虽然小图能够在一些移动端可能展示的还行,但是放到pc端展示图片太小效果真的是很一般!建议阅读本文查看上一篇文章,在具体实现不做太多介绍,只讲个分析思路。 当然,本文可能技术要求不是特别高,但可以...
相关热词 c# oracle 开发 c#选择字体大小的控件 c# usb 批量传输 c#10进制转8进制 c#转base64 c# 科学计算 c#下拉列表获取串口 c# 如何防止参数被修改 c#开发微信公众号例子 c# null