前端弹窗设计部分代码笔记

最新推荐文章于 2024-12-12 19:44:00 发布

灿烂的人生

最新推荐文章于 2024-12-12 19:44:00 发布

阅读量216

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端知识文章标签： css html html5

本文链接：https://blog.csdn.net/qq_43404969/article/details/120744374

前端知识专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何解决CSS弹窗与主页面滚动条冲突的问题，通过定制滚动条样式，并附带全屏遮罩代码，确保良好用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css弹窗的滚动条显示（当与主页面的滚动条冲突时，可以试试）

.scrollArr::-webkit-scrollbar{
	width:9px;
	height;9px;
}
.scrollArr::-webkit-scrollbar-track{
	background:#f3f3f3;
}
.scrollArr::-webkit-scrollbar-thumb{
	-webkit-border-radius:3px;
	border-radius:3px;
	background:#ccc;
}

定义一个shadow，渲染整个页面

<div id="shadow" 
style="display:none;background-color:#222222;width:100%;height:100%;position:fixed;opcity:0.5;z-index=9998;">
</div>

弹窗显示

<div id="A" 
style="display:none;position:fixed;width:70%;height:80%;z-index:9999;left:15%;top:15%;">
	<div id="B" style="width:100%;height:75%;background-color:white;">
		<div style="">(自己写一些弹窗的标题)</div>
	</div>
	//在写一个关闭弹窗的按钮
	<div style="height:50px;margin-top:10px;text-align:center;"
		onclick="$('#A').hide();$('#shadow').hide()">
		<img src="(取消图标自定义）" alt="">
	</div>
</div>