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

已于 2022-05-26 16:39:22 修改
阅读量233 收藏
点赞数
文章标签： css html5 css3 javascript jquery
于 2021-04-09 11:08:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/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>

柠檬很甜-
关注
鸿蒙界面开发——组件（2）：文本显示 (Text/Span) &文本输入 (TextInput/TextArea) &显示图片 (Image) & 自定义弹窗 (CustomDialog)
littleyy666的博客
09-02 2035
使用@CustomDialog装饰器装饰自定义弹窗。@CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容（也就是弹框内容）。})build() {Column() {Text('我是内容')创建构造器，与装饰器呼应相连。@Entry@Component//创建构造器，与装饰器呼应相连。})点击与onClick事件绑定的组件使弹窗弹出。@Entry@Component//创建构造器，与装饰器呼应相连。
QT的QGraphicsView类的使用
希望我的博客，能帮上你解决学习中工作中所遇到的问题
12-12 1113
详细说明 QGraphicsView类提供了一个小部件，用于显示QGraphicsScene的内容。 QGraphicsView在可滚动视口中可视化QGraphicsScene的内容。要创建包含几何项目的场景，请参见QGraphicsScene的文档。 QGraphicsView是Graphics View Framework的一部分。 为了使场景可视化，首先要构造一个QGraphicsView对象，然后将要可视化的场景的地址传递给QGraphicsView的构造函数。另外，您可以调用setScene（）在
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动).docx
01-19
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动).docx
html5 弹窗始终在屏幕中间,始终在屏幕中间显示Div的代码(css+js)
weixin_29009501的博客
06-15 1607
一、在中间显示;(参考：sky100articles1790515)复制代码 代码如下:.ordersearchDivCss{position: absolute;z-index: 100;display: block;background-color: #6ec1df;}Js code调用：// JScript 文件 通过元素id得到对象的函数function $(id){return docu...
弹出层居中，滚动条滚动始终在屏幕中间
williamzhengguohui的专栏
12-31 2029
<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 460
jq写一个弹窗，效果如上图所示， 点击按钮弹窗弹出，右上角关闭。 弹窗始终显示在页面中间，无论放大缩小窗口，滚轮滚动。 代码如下： html： <br><br><br><br> <button>弹出</button> <div id="tanchuang"> <span id="cl...
html滚动图片居中,图像不随滚动条移动，始终固定在网页垂直居中央的特效
weixin_39723441的博客
06-04 1159
让一个 div(有背景图片) 在页面里面固定，位置需要水平和垂直居中，且不随页面的滚动而滚动以下讨论的是和滚动条 垂直居中 相关的图像不随滚动条移动，始终固定在网页垂直居中央的特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：脚本代码(For Alixixi.com)如下:图片保持垂直居中的网页特效.logo {width: 540px;height: 25...
jquery 弹出居中登录窗口，静止滚动 背景变灰色
08-10
5. **事件监听滚动**：如果希望背景层随滚动条静止，可以通过监听滚动事件来实现。当用户滚动时，更新背景层的位置使其始终保持在顶部。这可以通过`$(window).scroll()`函数实现。 ```javascript $(window).scroll...
【动态弹窗元素创造】：结合DOM操作，window.open的高级应用技巧
![【动态弹窗元素创造】：结合DOM操作，window.open的高级应用技巧]...动态弹窗元素是网页设计中不可
UIOTOS文档： 容器 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等
最新发布
qq_69807227的博客
08-17 1012
最常规的容器组件，仅提供嵌套基础功能，本身无任何其他专属功能。相比之下，对话框可以弹窗、tab页签可以多页切换，滚动页能够超出内容区域滑动等。
js固定层不随滚动条滚动图片广告固定层在顶部
11-10
js固定层不随滚动条滚动图片广告固定层在顶部
弹出框始终保持居中（包括有滚动条和窗体缩放时）
weixin_30765505的博客
12-05 274
之前写的代码，都是在当前窗口位于居中，可是一旦窗口缩小或者放大都不是位于居中的位置了，但是一直想写的一个类似于alert弹出窗口的效果。 原理很简单： 获取当前屏幕（窗体）的宽度和高度，因为不同浏览器的窗体大小是不一样的。有了这个，可以计算出来横向居中和垂直居中的坐标。但是滑动了滚动条怎么依然横向居中和垂直居中呢？这个时候就要获取当前窗体距离页面顶部的高度和横向滚动条移动的宽度，加到刚刚的y轴...
jquery配合css实现滚动页面弹层的绝对居中
Bonjours的专栏
12-26 362
功能是页面上下滚动不影响弹层的垂直绝对居中，他会跟着滚动的页面自动调整位置以达到垂直居中效果。效果如下（由于文件大小限制，滚动速度快进了2倍，实际鼠标滚动速度更缓慢平滑）： HTML： <body class="page-body"> <a href="javascript:void(0)" class=" dt-lk12" name="view">点击弹...
弹框随窗口变化始终居中
weixin_30306905的博客
03-01 323
center($(".wrap_out")); function center(obj) { //obj这个参数是弹出框的整个对象 var screenWidth = $(window).width(), screenHeigth = $(window).height(); //获取屏幕宽高 var scollTop = $(docume...
解决页面跳转后滚动条保持在底部 解决单选框 弹窗位置错位 解决时间选择器弹窗错位
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
10-10 523
ishttpsvg 是用来判断他是 用户上传的 还是 本身就有的icon图标。我判断了前四位是否 是http开头 也就是区分了用户上传和本身的icon图。当 menu2.icon 为空时显示默认的加号图标。如果不为空则显示icon图。
弹窗居中，不会随页面滚动变化，直接固定在屏幕中央
weixin_30325793的博客
08-09 1020
定位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 830
使用DIV弹出窗口来动态显示内容的原理：首先采用CSS和HTML隐藏弹窗中的内容，然后利用JavaScript(本教程中是JQuery)来动态显示它们。这种效果不仅能够充分利用有限的版面空间，而且能够提高用户体验；更重要的是，它并不影响SEO效果(因为它实际存在于页面中，只是初始为不可见状态)1、在html页面中定义一个div，并在div实现我们需要展示的内容。网站登录 帐 号：密 码：注册新用户...
jQuery 弹出窗口一直居中详细案例
w5167839的专栏
11-03 3076
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 815
css 弹窗万能居中
html带有滚动条的弹窗
05-26
你可以使用CSS和JavaScript来创建一个带有滚动条的弹窗。 首先，你需要创建一个HTML元素作为弹窗的容器，例如： ```html <div class="popup-container"> <div class="popup-content"> <!-- 弹窗内容 --> </div> </div> ``` 接下来，你需要使用CSS来设置弹窗容器的样式： ```css .popup-container { position: fixed; /* 固定位置 */ top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */ display: flex; justify-content: center; align-items: center; z-index: 9999; /* 设置层级 */ } .popup-content { max-width: 90%; /* 弹窗最大宽度 */ max-height: 90%; /* 弹窗最大高度 */ overflow-y: auto; /* 垂直滚动条 */ background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } ``` 最后，你需要使用JavaScript来控制弹窗的显示和隐藏： ```javascript const popupContainer = document.querySelector(&#39;.popup-container&#39;); const popupContent = document.querySelector(&#39;.popup-content&#39;); function showPopup() { popupContainer.style.display = &#39;flex&#39;; } function hidePopup() { popupContainer.style.display = &#39;none&#39;; } // 点击按钮显示弹窗 document.querySelector(&#39;.open-popup-btn&#39;).addEventListener(&#39;click&#39;, showPopup); // 点击弹窗外部或关闭按钮隐藏弹窗 popupContainer.addEventListener(&#39;click&#39;, (event) => { if (event.target === popupContainer) { hidePopup(); } }); document.querySelector(&#39;.close-popup-btn&#39;).addEventListener(&#39;click&#39;, hidePopup); ``` 这样，你就可以创建一个带有滚动条的弹窗了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值