主要修改弹窗窗口的样式

于 2023-12-20 13:50:36 发布
阅读量621 收藏 6
点赞数 15
文章标签： javascript css 前端 html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lulei5153/article/details/135105953
版权 

<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>html+css+js 弹窗窗口</title>
</head>
<style>
	* {
		/*所有的标签都有的属性遵循的统一样式*/
		padding: 0;
		margin: 0;
		/* 文字禁止选中 */
		user-select: none;
		/* 盒子模型 */
		box-sizing: border-box;
	}

	.chakai {
		background-image: linear-gradient(to top left,
				rgba(7, 9, 7, 0.699),
				rgba(58, 158, 91, 0.2) 20%,
				rgb(0, 0, 0));
		box-shadow:
			inset 2px 2px 3px rgba(74, 151, 91, 0.6),
			inset -2px -2px 3px rgba(0, 0, 0, 0.6);
	}

	h2 {
		width: 222px;
		height: 50px;
		/* 设置边框圆角 */
		border-radius: 10px;
		/* 设置字体大小 */
		font-size: 30px;
		/* 设置字体颜色 */
		color: #efed6a;
		/* 设置字体粗细 */
		font-weight: bold;
		/* 设置字体样式 */
		font-style: italic;
		/* 设置字体 */
		font-family: "微软雅黑", "宋体", "黑体";
		/* 设置文字位置 */
		margin: 20px 100px;
		background-color: rgba(220, 0, 0, 1);
		background-image: linear-gradient(to top left,
				rgba(0, 0, 0, 0.2),
				rgba(0, 0, 0, 0.2) 30%,
				rgba(0, 0, 0, 0));
		box-shadow:
			inset 2px 2px 3px rgba(255, 255, 255, 0.6),
			inset -2px -2px 3px rgba(0, 0, 0, 0.6);
		text-shadow: 1px 1px 1px #100000;
	}

	.jiemian-box {
		/* 设置输入框大小 */
		width: 1200px;
		height: 100%;
		top: 100px;
		/* calc方法可以自动计算数值 */
		left: calc(50% - 270px);
		/* 设置背景颜色 */
		background: rgba(51, 150, 102, 0.5);
		margin: 20px;
		/* 设置边框 */
		border: 1px solid #3f1e1e;
		background-image: linear-gradient(to top left,
				rgba(0, 0, 0, 0.2),
				rgba(57, 40, 40, 0.2) 20%,
				rgba(0, 0, 0, 1));
		box-shadow:
			inset 2px 2px 3px rgba(255, 255, 255, 0.6),
			inset -2px -2px 3px rgba(0, 0, 0, 0.6);
	}

	input {
		/* 设置输入框大小 */
		width: 320px;
		height: 50px;
		/* 设置输入框文字大小 */
		font-size: 30px;
		/* 设置输入框颜色 */
		color: #ffff;
		/* 设置边框圆角 */
		border-radius: 5px;
		/* 设置边框 */
		border: 1px solid #3f1e1e;
		/* 设置内边距 */
		padding-left: 10px;
		margin: 20px;
		background-color: rgba(79, 132, 78, 0.774);
		background-image: linear-gradient(to top left,
				rgba(0, 0, 0, 0.2),
				rgba(0, 1111, 0, 0.2) 53%,
				rgba(0, 1101, 0, 0.5));
		box-shadow:
			inset 2px 2px 3px rgba(255, 255, 255, 0.6),
			inset -2px -2px 3px rgba(0, 0, 0, 0.6);
		color: #fcf9f9;
		text-shadow: 1px 1px 1px #100000;
	}

	h2::before {
		/*查看的圆圈*/
		content: "";
		position: absolute;
		top: 104px;
		left: 360px;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		border: 10px solid rgba(3, 227, 96, 0.916);
		box-shadow:
			inset 2px 2px 3px rgba(77, 137, 42, 0.6),
			inset -2px -2px 3px rgba(0, 0, 0, 0.6);
		text-shadow: 1px 1px 1px #100000;
	}

	/* 设置添加按钮 */
	.chakai,
	.anni {
		/*相对定位*/
		position: relative;
		/* 鼠标移入变小手 */
		cursor: pointer;
		/*文字大小*/
		font-size: 20px;
		/*文字 加粗*/
		font-weight: bold;
		/*文字描边*/
		border: 1px solid #6f1468;
		width: 50px;
		height: 50px;
		/*设置间距*/
		margin: 10px;
		border-radius: 50%;
	}

	.chakai:hover,
	.anni:hover {
		color: #f1eaea;
		background-color: rgba(199, 76, 193, 0.929);
	}

	.chakai:active,
	.anni:active {
		box-shadow:
			inset -2px -2px 3px rgba(146, 168, 135, 0.11),
			inset 2px 2px 3px rgba(23, 15, 18, 0.22);
	}

	.anni::before {
		content: "";
		position: absolute;
		top: -11px;
		left: -11px;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		border: 10px solid #f42e6a;
		box-shadow:
			inset 2px 2px 3px rgba(214, 176, 176, 0.6),
			inset -2px -2px 3px rgba(0, 0, 0, 0.6);
		text-shadow: 1px 1px 1px #100000;
	}

	/*设置弹窗盒子*/
	.yingchang-box {
		/* 隐藏弹窗盒子
		display: none;*/
		/* 设置盒子大小 */
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		top: 60px;
		/* calc方法可以自动计算数值 */
		left: calc(50% - 270px);
	}

	.yingchang-box,
	.box {
		top: 60px;
		/* calc方法可以自动计算数值 */
		left: calc(50% - 270px);
		/* 设置盒子大小 */
		width: 400PX;
		height: 560PX;
		/* 设置盒子圆角 */
		border-radius: 15px;
		/* 设置盒子相对定位 子级元素使用绝对定位时，父级元素就要用相对定位 */
		position: relative;
	}

	.box {
		/* 设置边框 */
		border: 1px solid #3f1e1e;
		/* 设置盒子阴影 */
		box-shadow: 8px 8px 8px #3f1e1e;
		/* 设置盒子 背景颜色 */
		background-color: #80e1e8;
		background-image: linear-gradient(to top left,
				rgba(0, 0, 0, 0.2),
				rgba(57, 40, 40, 0.2) 30%,
				rgba(0.5, 255, 0, 1));
		box-shadow:
			inset 2px 2px 3px rgba(255, 255, 255, 0.6),
			inset -2px -2px 3px rgba(0, 0, 0, 0.6);
	}

	.tianjiacaozuox {
		/* 设置盒子高度 */
		height: 70px;
		/* 设置背景颜色 */
		background: rgba(51, 150, 102, 0.5);
		/* 设置边框圆角 */
		border-radius: 15px 15px 0 0;
		/* 设置边框 */
		border: 1px solid #3f1e1e;
		/* 设置盒子文字大小 */
		font-size: 30px;
		/* 鼠标移入呈现移动光标 */
		cursor: move;
		background-image: linear-gradient(to top left,
				rgba(0, 0, 0, 0.2),
				rgba(57, 40, 40, 0.2) 40%,
				rgba(0, 225, 0, 1));
		box-shadow:
			inset 2px 2px 3px rgba(255, 255, 255, 0.6),
			inset -2px -2px 3px rgba(0, 0, 0, 0.6);
	}

	.shurukuang {
		height: 380px;
		/* 设置盒子圆角 */
		border-radius: 10px;
		/* 设置背景颜色 */
		background: rgba(51, 150, 102, 0.5);
		margin: 20px;
		/* 设置边框 */
		border: 1px solid #3f1e1e;
		background-image: linear-gradient(to top left,
				rgba(0, 0, 0, 0.2),
				rgba(57, 40, 40, 0.2) 20%,
				rgba(0, 1000, 0, 1));
		box-shadow:
			inset 2px 2px 3px rgba(255, 255, 255, 0.6),
			inset -2px -2px 3px rgba(0, 0, 0, 0.6);
	}

	.shurukuang input {
		/* 设置输入框大小 */
		width: 320px;
		height: 50px;
		/* 设置输入框文字大小 */
		font-size: 30px;
		/* 设置输入框颜色 */
		color: #ffff;
		/* 设置边框圆角 */
		border-radius: 5px;
		/* 设置边框 */
		border: 1px solid #3f1e1e;
		/* 设置内边距 */
		padding-left: 10px;
		margin: 20px;
		background-color: rgba(79, 132, 78, 0.774);
		background-image: linear-gradient(to top left,
				rgba(0, 0, 0, 0.2),
				rgba(0, 0, 0, 0.2) 53%,
				rgba(0, 1000, 0, 1));
		box-shadow:
			inset 2px 2px 3px rgba(255, 255, 255, 0.6),
			inset -2px -2px 3px rgba(0, 0, 0, 0.6);
		color: #fcf9f9;
		text-shadow: 1px 1px 1px #100000;
	}

	input::placeholder {
		color: rgba(236, 241, 239, 0.861);
	}

	.anniu {
		/* 设置边框 */
		border: 1px solid #3f1e1e;
		/* 设置按钮盒子大小 */
		height: 70px;
		/* 设置边框圆角 */
		border-radius: 0px 0px 15px 15px;
		/* 设置背景颜色 */
		background: rgba(51, 150, 102, 0.5);
		/* 设置盒子阴影 */
		box-shadow: 8px 8px 8px rgba(109, 40, 166, 0);
		background-image: linear-gradient(to top left,
				rgba(0, 0, 0, 0.2),
				rgba(57, 40, 40, 0.2) 60%,
				rgba(0, 250, 0, 1));
		box-shadow:
			inset 2px 2px 3px rgba(255, 255, 255, 0.6),
			inset -2px -2px 3px rgba(0, 0, 0, 0.6);
	}

	i {
		/* 设置字体大小 */
		font-size: 40px;
		/* 设置字体颜色 */
		color: #bdb3b3;
		/* i标签默认是斜体 这个属性可以变正 */
		font-style: normal;
		/* 设置鼠标变小手 */
		cursor: pointer;
		/* 设置绝对定位 */
		position: absolute;
		margin-left: 340px;
		border-radius: 50%;
		margin-top: 10px;
		padding-left: 11px;
		padding-right: 11px;
		background-color: rgba(220, 0, 0, 1);
		background-image: linear-gradient(to top left,
				rgba(0, 0, 0, 0.2),
				rgba(0, 0, 0, 0.2) 30%,
				rgba(0, 0, 0, 0));
		box-shadow:
			inset 2px 2px 3px rgba(255, 255, 255, 0.6),
			inset -2px -2px 3px rgba(0, 0, 0, 0.6);
		color: #fcf9f9;
		text-shadow: 1px 1px 1px #100000;
	}

	span {
		/* 设置添加操作标题位置 */
		position: absolute;
		border-radius: 15px;
		margin-top: 10px;
		margin-left: 10px;
		font-size: 1.2em;
		background-color: rgba(51, 150, 102, 0.5);
		box-shadow:
			inset 2px 2px 3px rgba(255, 255, 255, 0.6),
			inset -2px -2px 3px rgba(0, 0, 0, 0.6);
		background-image: linear-gradient(to top left,
				rgba(0, 0, 0, 0.2),
				rgba(0, 0, 0, 0.2) 30%,
				rgba(0, 1000, 200, 200));
	}

	.anniu input {
		/* 设置按钮大小 */
		width: 50px;
		height: 50px;
		/* 设置边框圆角 */
		border-radius: 50%;
		/* 设置边框 */
		border: 1px solid #3f1e1e;
		/* 设置相对定位*/
		position: relative;
		/* 设置鼠标变小手 */
		cursor: pointer;
		/* 设置间距 */
		margin-left: 30px;
		margin-top: 10px;
		left: 100px;
		/* 设置字体大小 */
		font-size: 20px;
		background-color: rgba(220, 0, 0, 1);
		background-image: linear-gradient(to top left,
				rgba(0, 0, 0, 0.2),
				rgba(0, 0, 0, 0.2) 30%,
				rgba(0, 0, 0, 0));
		box-shadow:
			inset 2px 2px 3px rgba(255, 255, 255, 0.6),
			inset -2px -2px 3px rgba(0, 0, 0, 0.6);
		color: #fcf9f9;
		text-shadow: 1px 1px 1px #100000;
	}

	i:hover,
	.anniu input:hover {
		background-color: rgba(243, 212, 12, 0.155);
	}

	i::before {
		content: "";
		position: absolute;
		top: -11px;
		left: -11px;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		border: 10px solid rgba(3, 227, 96, 0.916);
		box-shadow:
			inset 2px 2px 3px rgba(77, 137, 42, 0.6),
			inset -2px -2px 3px rgba(0, 0, 0, 0.6);
		text-shadow: 1px 1px 1px #100000;
	}

	.anniu::before {
		content: "";
		position: absolute;
		left: 225px;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		border: 10px solid rgba(3, 227, 96, 0.916);
		box-shadow:
			inset 2px 2px 3px rgba(77, 137, 42, 0.6),
			inset -2px -2px 3px rgba(0, 0, 0, 0.6);
		text-shadow: 1px 1px 1px #100000;
	}

	span::before {
		/*添加的圆圈*/
		content: "";
		position: absolute;
		top: 480px;
		left: 110px;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		border: 10px solid rgba(3, 227, 96, 0.916);
		box-shadow:
			inset 2px 2px 3px rgba(77, 137, 42, 0.6),
			inset -2px -2px 3px rgba(0, 0, 0, 0.6);
		text-shadow: 1px 1px 1px #100000;
	}

	.shurukuang input:active,
	i:active,
	.anniu input:active {
		box-shadow:
			inset -2px -2px 3px rgba(18, 5, 60, 0.904),
			inset 2px 2px 3px rgba(0, 0, 0, 0.6);
	}
</style>

<body background="yyds.jpg" style="background-repeat:no-repeat;background-attachment:fixed;
background-size:100% 100%;">
	<div>
		<h2> 账号密码保管箱</h2>
		<hr>
		<input type="text" name="user" id="user" /><button type="button" id="chakai" class="chakai"
			onclick="searchMess(this)">查看</button><button type="button" class="anni" value="">添加</button>
		</tbody>
		</table>
		<!-- 设置弹窗盒子 -->
		<div class="yingchang-box">
			<div class="box">
				<!-- 设置头部 -->
				<div class="tianjiacaozuox">
					<span>添加操作</span><i class="guanbi">&times</i>
				</div>
				<form>
					<!-- 设置输入框-->
					<div class="shurukuang">
						<input type="text" class="wangzhan" placeholder="请输入网站名称">
						<input type="text" class="zhuanghao" placeholder="请输入用户账号">
						<input type="password" class="mima" placeholder="请输入用户密码">
						<input type="text" class="beizhu" placeholder="请输入备注内容">
					</div>
					<div class="anniu">
						<!--提交按钮-->
						<input type="submit" value="添加" class="tj">
						<!--重置按钮-->
						<input type="reset" value="重置" class="cz">
				</form>
			</div>
		</div>
	</div>
	</div>
	</div>
	<script>
		// 添加移动框
		// 添加页面加载事件
		window.addEventListener("load", () => {
			// 获取打开按钮
			const open = document.querySelector(".anni");
			// 获取关闭按钮
			const close = document.querySelector(".guanbi");
			// 获取整个大的模态框
			const fillScreen = document.querySelector(".yingchang-box");
			// 获取模态框可移动的头部区域
			const header = document.querySelector(".tianjiacaozuox");
			// 获取模态框珠主区域
			const modelBox = document.querySelector(".box");
			// 做打开功能
			open.addEventListener("click", () => {
				// 点击打开按钮 改变display属性值
				fillScreen.style.display = "block";
			});
			// 关闭功能
			close.addEventListener("click", () => {
				fillScreen.style.display = "none";
			});
			header.addEventListener("mousedown", (event) => {
				const x = event.pageX - modelBox.offsetLeft;
				const y = event.pageY - modelBox.offsetTop;
				console.log(x, y);
				document.addEventListener("mousemove", move);
				function move(event) {
					modelBox.style.left = event.pageX - x + "px";
					modelBox.style.top = event.pageY - y + "px";
				}
				document.addEventListener("mouseup", () => {
					document.removeEventListener("mousemove", move);
				});
			});
		});
	</script>
</body>

</html>

与妖为邻
关注
  • 15
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
jQuery确认对话框窗口弹窗插件.zip
07-05
jQuery确认对话框窗口弹窗插件是Web开发中常用的一种增强用户体验的工具，它使得用户在执行关键操作之前能够得到明确的确认提示。这个插件是基于JavaScript库jQuery构建的，利用了jQuery的强大功能和易用性，为...
（前端）你了解shadow吗？—css属性:box-shadow、text-shadow详解
最新发布
weixin_64388392的博客
11-26 1万+
css属性：box-shadow、text-shadow详解与实现案例
(css)自定义登录弹窗页面
nyf_unknow的博客
07-21 868
效果：-- 登录弹窗 -- > < el - dialog : visible . sync = "dialogVisible" title = "用户登录" width = "25%" center。
如何修改窗口或控件的样式
_Santiago的博客
03-12 617
本人描述了如何修改窗口或者控件样式的接口
三种CSS方式实现弹出窗口（popup window）
莫小猪的菜鸟进阶路
02-21 1万+
1. 使用display: flex；进行上下居中布局 在容器里面添加以下几行css语句 display: flex; justify-content: center; align-items: center; 注意： 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 <!DOCTYPE html> <html lang=...
修改窗口的样式
C++实习生
03-08 628
LONGlStyle =GetWindowLong( g_hwndRich,GWL_STYLE); if( lStyle& WS_HSCROLL) lStyle |=WS_HSCROLL; else lStyle &= ~WS_HSCROLL; SetWindowLong( g_hwndRich,GWL_STYLE, lStyle );
一款超好看又简洁的弹窗公告
03-18
这表明该弹窗公告系统主要由两部分组成：HTML文件（可能是包含公告内容和弹窗逻辑的网页）和CSS文件（用于定义弹窗及其内容的样式）。HTML文件是网页的基础，它可能包含了公告的文字、图片或者其他元素，并且利用...
默认弹出窗口修改.zip
06-13
浏览器默认弹窗样式修改 alert弹窗样式修改 默认浏览器弹窗样式修改，风格可自定义修改。 如下： ('您的提款申请已提交，请耐心等待！ 明月照沟渠,沟渠印我心！ 默认真的好.')">默认弹窗样式修改【点我惊喜...
jQuery自定义弹窗功能插件
04-02
4. **CSS样式设计**：为了使弹窗符合项目需求，我们需要使用CSS进行样式定制。这包括设置弹窗的尺寸、位置、背景、边框、阴影等。利用CSS预处理器如Sass或Less可以提高代码的可维护性。 5. **jQuery弹窗插件原理**...
jquery弹窗确认美化窗口代码下载.zip
07-05
在网页中，我们常常需要用户确认他们的操作，如删除、保存或退出等，传统的浏览器原生确认对话框样式单一且不可定制，而jQuery的弹窗确认美化窗口则可以解决这个问题，提升用户体验。 这个代码下载包含的是一个使用...
纯css实现自定义弹窗
m0_60633107的博客
11-15 6971
只是用css去实现自定义弹窗功能，理解思路和简单代码
修改弹窗样式，向全局抛出css样式文件
imkaifan的博客
03-03 706
修改弹窗样式，向全局抛出css样式文件
简单弹窗的设置(CSS方式)
przlovecsdn的博客
06-12 6402
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
超好看前端css美化弹窗
m0_55410737的博客
07-07 3482
原生弹窗不好看？种类少？那就用这款可自定义的css美化弹窗。 弹窗标题，内容，按钮都可自定义。
html修改弹窗样式,自定义弹窗Style样式_html/css_WEB-ITnose
weixin_35565325的博客
06-04 1456
由于系统默认alert弹出窗口不能自定义样式，有可能不符合网站的风格，虽然网上应该有很多这样的JS但是还是自己写的比较放心，顺便练习一下对DOM的操作支持IE6下的SELECT不能遮罩的问题，谷歌支持圆角，IE6下就比较丑了，四四方方的，不过可以自定义自己喜欢的样式听取建议后，修改了position:fixed, IE6下用hack处理了。点击看效果:点击模拟Alert弹出框点击模拟Alert弹出...
关于CSS设置弹出提示框样式
jwf552的专栏
08-17 4194
window.alert = function(str1,str2,str3,str4,str5,str6){         var shield = document.createElement("DIV");         shield.id = "shield";         shield.style.position = "absolute";         shield
layer弹窗样式的修改
热门推荐
qq_36470789的博客
10-15 1万+
是工作上遇到的问题弹窗按钮样式冲突 修正前： ， 参考了这里之后才解决了http://blog.csdn.net/docallen/article/details/53613186 修正后： 重要的是这句 （其实layer官网的文档上就有skin的介绍，所以还是要多看看文档）skin: 'demo-class'只有在函数里加了这句才可以重新编写样式
谈谈layer弹窗自定义样式，防止样式冲突问题(实习第七天)
ALLEN的博客
12-13 1万+
如果在一个页面中存在两个以上的layer弹窗，那么当我们修改其中一个弹窗的默认样式的话，其他的弹窗就会受到影响，今天就来谈谈怎么样去避免样式冲突。layer自定义弹窗样式问题情境：  在一个全局页面中存在多个layer.open({});layer.open({ type: 2, title: '创建群',
qt 怎么设置弹窗样式为window XP风格
06-11
要设置弹窗样式为 Windows XP 风格，可以使用 Qt 的样式表功能。具体步骤如下： 1. 在你的代码中引入 QSS 样式表文件，可以使用类似于下面的代码： ``` QFile file(":/qss/windowsxp.qss"); file.open(QFile::ReadOnly); QString styleSheet = QLatin1String(file.readAll()); qApp->setStyleSheet(styleSheet); ``` 这里的 `windowsxp.qss` 就是你自己定义的样式表文件，可以根据需要进行修改。 2. 在样式表文件中定义窗口和弹窗的样式，可以使用类似于下面的代码： ``` QWidget { background-color: #F0F0F0; border: 1px solid #C4C4C4; border-radius: 5px; padding: 5px; } QMessageBox { background-color: #F0F0F0; border: 1px solid #C4C4C4; border-radius: 5px; padding: 5px; font-size: 12px; } QMessageBox QPushButton { background-color: #F0F0F0; border: 1px solid #C4C4C4; border-radius: 5px; padding: 5px; font-size: 12px; } ``` 这里的样式定义了 QWidget 和 QMessageBox 的背景色、边框、圆角等属性，以及弹窗中按钮的样式。 3. 在需要弹出弹窗的地方，使用 QMessageBox::information() 等函数弹出消息框，并设置样式，例如： ``` QMessageBox msgBox; msgBox.setText("Hello, world!"); msgBox.setStandardButtons(QMessageBox::Ok); msgBox.setDefaultButton(QMessageBox::Ok); msgBox.setIcon(QMessageBox::Information); msgBox.setStyleSheet(styleSheet); int ret = msgBox.exec(); ``` 这里的 `styleSheet` 就是上面定义的样式表。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值