一个好看的公告弹窗令人赏心悦目，提高站点B格！
<!DOCTYPE html>
<html 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>
<div>
<div class="loader-inner pacman">
</div>
</div>
</div>
<!--loading页结束-->
<body>
<!-- 弹窗代码开始 -->
<div 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;">可选时间：每次、每天、三天、七天</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>本文链接：https://blog.lahong.top/post/70.html 本文及相关素材著作权归原作者所有，未经书面授权禁止擅自转载、摘抄、改编及商业使用，违者将追究法律责任
转载声明：本站发布文章及版权归原作者所有，转载本站文章请注明文章来源！
