滚动条下弹窗位置不变居中

已于 2022-05-26 16:39:22 修改
阅读量203 收藏
点赞数
文章标签： css html5 css3 javascript jquery
于 2021-04-09 11:08:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43861449/article/details/115542032
版权 
<!DOCTYPE html>
<html>
	<head>
		<title>jQuery弹出框</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style>
			.div_back {
				display: none;
				position: fixed;
				z-index: 9998;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: #666666;
				opacity: 0.5;
				filter: alpha(opacity=50);
				-moz-opacity: 0.5;
			}

			.div_pop {
				display: none;
				position: fixed;
				z-index: 9999;
				background-color: #eafcd5;
				top: 30%;
				left: 42%;
				width: 200px;
				height: 80px;
				padding: 2px;
				border-radius: 10px;
				box-shadow: 0 0 10px #666;
				border: 2px solid #666666;
			}

			.div_title {
				font-size: 20px;
				padding: 2px;
				background-color: #978987;
			}

			.div_close {
				position: absolute;
				right: 5px;
			}
		</style>
		<script src="http://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
		<script>
			function fnClose() {
				$("#div_back").hide();
				$("#div_pop").hide();
			}

			function fnOpen() {
				$("#div_back").show();
				$("#div_pop").show();
			}
		</script>
	</head>
	<body>
		<div id="div_back" class="div_back"></div>
		<div id="div_pop" class="div_pop">
			<div id="div_title" class="div_title">提示:
				<a id="" href="javascript:fnClose()" class="div_close">关闭</a>
			</div>
		</div>
		<p align="center">
			<input type="button" value="打开" onClick="fnOpen()" />
		</p>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<p align="center">
			<input type="button" value="打开" onClick="fnOpen()" />
		</p>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<h2>aaa</h2>
		<p align="center">
			<input type="button" value="打开" onClick="fnOpen()" />
		</p>
	</body>
</html>

柠檬很甜-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
QT的QGraphicsView类的使用
希望我的博客，能帮上你解决学习中工作中所遇到的问题
12-12 1062
详细说明 QGraphicsView类提供了一个小部件，用于显示QGraphicsScene的内容。 QGraphicsView在可滚动视口中可视化QGraphicsScene的内容。要创建包含几何项目的场景，请参见QGraphicsScene的文档。 QGraphicsView是Graphics View Framework的一部分。 为了使场景可视化，首先要构造一个QGraphicsView对象，然后将要可视化的场景的地址传递给QGraphicsView的构造函数。另外，您可以调用setScene（）在
uniapp(全端兼容) - 实现类似微信聊天、淘宝买卖双方交流的简易聊天功能示例（开箱即用，完整源码与注释）全端兼容 H5 App 小程序，稳定无 BUG！
热门推荐
高级前端工程师
03-01 1万+
uni-app开发聊天页面，想在uniapp做一个IM即时聊天，uniapp模仿微信实现聊天界面的示例代码，uniapp中使用Socket.IO/websocket实现即时通讯聊天，关于uniapp:uniapp实现IM即时通讯仿微信聊天功能，uniapp中使用websocket实现实时聊天功能，uniapp实现聊天功能，uniapp 聊天界面，uni-app+vue仿微信聊天APP界面，uniapp实现聊天|uniapp聊天源码，uniapp实现聊天室发送信息，前端uniapp+webSocket 聊天室
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动).docx
01-19
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动).docx
html5 弹窗始终在屏幕中间,始终在屏幕中间显示Div的代码(css+js)
weixin_29009501的博客
06-15 1521
一、在中间显示;(参考：sky100articles1790515)复制代码 代码如下:.ordersearchDivCss{position: absolute;z-index: 100;display: block;background-color: #6ec1df;}Js code调用：// JScript 文件 通过元素id得到对象的函数function $(id){return docu...
弹出层居中，滚动条滚动始终在屏幕中间
williamzhengguohui的专栏
12-31 1981
<br /><script type="text/javascript">var docEle =function() { return document.getElementById(arguments[0]) ||false; } function openNewDiv(_id) { var m ="mask"; if (docEle(_id)) document.body.removeChild(docE
jq弹窗（获取页面宽高，滚轮高度，始终居中）
weixin_33726318的博客
06-21 427
jq写一个弹窗，效果如上图所示， 点击按钮弹窗弹出，右上角关闭。 弹窗始终显示在页面中间，无论放大缩小窗口，滚轮滚动。 代码如下： html： <br><br><br><br> <button>弹出</button> <div id="tanchuang"> <span id="cl...
html滚动图片居中,图像不随滚动条移动，始终固定在网页垂直居中央的特效
weixin_39723441的博客
06-04 1098
让一个 div(有背景图片) 在页面里面固定，位置需要水平和垂直居中，且不随页面的滚动而滚动以下讨论的是和滚动条 垂直居中 相关的图像不随滚动条移动，始终固定在网页垂直居中央的特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：脚本代码(For Alixixi.com)如下:图片保持垂直居中的网页特效.logo {width: 540px;height: 25...
jquery 弹出居中登录窗口，静止滚动 背景变灰色
08-10
5. **事件监听滚动**：如果希望背景层随滚动条静止，可以通过监听滚动事件来实现。当用户滚动时，更新背景层的位置使其始终保持在顶部。这可以通过`$(window).scroll()`函数实现。 ```javascript $(window).scroll...
bootstrap 彈窗默認打開_Bootstrap 手册 07 - JS 组件篇
weixin_39932692的博客
02-23 291
1. 动画过渡 TransitionBootstrap 对一些组件默认使用过渡动画效果，这种效果是由 CSS3 实现，故不支持 IE 6-8。模态弹窗 (Modal) 的滑动和渐变效果；选项卡 (Tab) 的渐变效果；警告框 (Alert) 的渐变效果；图片轮播 (Carousel) 的滑动效果；2. 模态弹窗 ModalBootstrap 模态弹窗通常有以下表现——点击某按钮后弹窗，弹窗内容为文...
完全自主网页设计记录（三）
weixin_52261079的博客
07-19 941
最近开始练车了，所以进度比较慢，本来也就慢。今天给导航栏的文字插入了超链接，给超链接的不同状态设置了不同的颜色。然后制作了一个图片滚动播放的动画。动画对于我来说是新的知识，但是并不难，还挺简单的。httpshttpshttps。...
js固定层不随滚动条滚动图片广告固定层在顶部
11-10
js固定层不随滚动条滚动图片广告固定层在顶部
弹出框始终保持居中（包括有滚动条和窗体缩放时）
weixin_30765505的博客
12-05 236
之前写的代码，都是在当前窗口位于居中，可是一旦窗口缩小或者放大都不是位于居中的位置了，但是一直想写的一个类似于alert弹出窗口的效果。 原理很简单： 获取当前屏幕（窗体）的宽度和高度，因为不同浏览器的窗体大小是不一样的。有了这个，可以计算出来横向居中和垂直居中的坐标。但是滑动了滚动条怎么依然横向居中和垂直居中呢？这个时候就要获取当前窗体距离页面顶部的高度和横向滚动条移动的宽度，加到刚刚的y轴...
jquery配合css实现滚动页面弹层的绝对居中
Bonjours的专栏
12-26 327
功能是页面上下滚动不影响弹层的垂直绝对居中，他会跟着滚动的页面自动调整位置以达到垂直居中效果。效果如下（由于文件大小限制，滚动速度快进了2倍，实际鼠标滚动速度更缓慢平滑）： HTML： <body class="page-body"> <a href="javascript:void(0)" class=" dt-lk12" name="view">点击弹...
弹框随窗口变化始终居中
weixin_30306905的博客
03-01 297
center($(".wrap_out")); function center(obj) { //obj这个参数是弹出框的整个对象 var screenWidth = $(window).width(), screenHeigth = $(window).height(); //获取屏幕宽高 var scollTop = $(docume...
解决页面跳转后滚动条保持在底部 解决单选框 弹窗位置错位 解决时间选择器弹窗错位
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
10-10 450
ishttpsvg 是用来判断他是 用户上传的 还是 本身就有的icon图标。我判断了前四位是否 是http开头 也就是区分了用户上传和本身的icon图。当 menu2.icon 为空时显示默认的加号图标。如果不为空则显示icon图。
弹窗居中，不会随页面滚动变化，直接固定在屏幕中央
weixin_30325793的博客
08-09 984
定位top为50%；left为50%； 然后使用transifrom transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); 这样弹窗就可以居中，不会随着页面的滚动而变化直接固定在屏幕中央的 转载于:https://www.cnblogs.com/weisuoyuwei/p...
html弹出窗口怎么居中显示,HTML页面弹出居中可拖拽的自定义窗口层
weixin_31163527的博客
06-09 774
使用DIV弹出窗口来动态显示内容的原理：首先采用CSS和HTML隐藏弹窗中的内容，然后利用JavaScript(本教程中是JQuery)来动态显示它们。这种效果不仅能够充分利用有限的版面空间，而且能够提高用户体验；更重要的是，它并不影响SEO效果(因为它实际存在于页面中，只是初始为不可见状态)1、在html页面中定义一个div，并在div实现我们需要展示的内容。网站登录 帐 号：密 码：注册新用户...
jQuery 弹出窗口一直居中详细案例
w5167839的专栏
11-03 2993
jQuery弹出框 .div_back{ display:none; position:fixed; z-index:9998; top:0; left:0; width: 100%; height: 100%; background-color:#666666; opacity:0.5; filter: alpha(opacity=50); -moz-opacity:
弹窗万能居中办法
songjiweiliu的博客
04-01 739
css 弹窗万能居中
滚动条内任意位置弹框居中
最新发布
05-30
要实现滚动条内任意位置弹框居中，可以使用 JavaScript 来计算弹框的位置并设置样式。 首先，计算弹框应该显示在滚动条内的哪个位置。可以使用以下代码： ```javascript // 获取滚动条的位置 var scrollTop = ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值