html+css提示框/弹窗公告实例【记录】

最新推荐文章于 2024-05-02 18:52:42 发布

PSW_18722821243

最新推荐文章于 2024-05-02 18:52:42 发布

阅读量748

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/PSW_18722821243/article/details/131988025

版权

在这里插入图片描述

https://blog.csdn.net/q906270629/article/details/125329110?ops_request_misc=&request_id=&biz_id=102&utm_term=HTML%E9%A1%B5%E9%9D%A2%E5%BC%B9%E5%87%BA%E5%85%AC%E5%91%8A&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-1-125329110.142^v91insert_down1,239^v9insert_chatgpt&spm=1018.2226.3001.4187


<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<title>首页</title>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, dataInfo-scalable=no" name="viewport">
	<script src="/js/frontH5/rem.js"></script>
	<script src="/js/frontH5/jquery.min.js" type="text/javascript"></script>
	<script src="/js/bootstrap/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/css/frontH5/base.css"/>
	<link rel="stylesheet" type="text/css" href="/css/frontH5/page.css"/>
	<!--<link rel="stylesheet" type="text/css" href="/css/frontH5/all.css"/>-->

	<link rel="stylesheet" type="text/css" href="/css/frontH5/loaders.min.css"/>
	<link rel="stylesheet" type="text/css" href="/css/frontH5/loading.css"/>
	<link rel="stylesheet" type="text/css"  href="/js/bootstrap/bootstrap.min.css">
	<script src="/plugins/layer/layer.js"></script>

	<script type="text/javascript">
		$(window).load(function(){
			$(".loading").addClass("loader-chanage")
			$(".loading").fadeOut(300)
		})

		//设置 模态框不关闭
		$('#myModal').modal({
			backdrop: 'static', //点击遮罩层不会被关闭
			keyboard: false //按下esc键不会被关闭
		});

		$('#delModal').modal({
			backdrop: 'static', //点击遮罩层不会被关闭
			keyboard: false //按下esc键不会被关闭
		});

	</script>
	<!--<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>-->

	<style type="text/css">
		a:hover {text-decoration: none;}
	</style>

</head>
<!--loading页开始-->
<div class="loading">
	<div class="loader">
		<div class="loader-inner pacman">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>
</div>
<!--loading页结束-->
<body>
<!-- 弹窗代码开始 -->
<div class="web_notice" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.3);z-index: 99999;">
	<div style="position: fixed;top: 50%;left: 50%;width: 550px;background: #FFF;transform: translate(-50%, -50%);border-radius: 40px;padding: 50px 40px;">
		<h3 style="font-weight: bold;text-align: center;font-size: 30px;">独山城区幼儿园/小学报名通知</h3>
		<div style="font-size: 16px;margin-top: 26px;line-height: 30px;color: #999;">
			<p style="text-align: left;text-indent: 4em;">独山城区幼儿园/小学报名通道暂未开通, </p>
			<bolder><p style="text-align: left;text-indent: 4em;color:red;font-size:12pt;">小学报名时间于8月1日至4日开始线上报名！！！ </p></bolder>
			<p style="text-align: left;text-indent: 4em;">幼儿园另行通知! 敬请关注 </p>
		</div>
		<a style="display: block;background: #98a3ff;color: #FFF;text-align: center;font-weight: bold;font-size: 19px;line-height: 60px;margin: 0 auto;margin-top: 45px;border-radius: 32px;width: 80%;" onclick="javascript:document.querySelector('.web_notice').remove()">我知道了
		</a>
	</div>
</div>
<!-- 弹窗代码结束 -->
</body>
<script type="text/javascript">


</script>
<!--<script src="/js/admin/frontcommon.js"></script>-->
</html>