用HTML5制作web页面对联弹窗广告代码
时间: 2024-05-22 16:01:56 浏览: 12
<!DOCTYPE html>
<html>
<head>
<title>对联弹窗广告</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
#ad-wrapper{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.5);
z-index: 9999;
display: none;
}
#ad-content{
position: absolute;
width: 300px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -100px;
background: #fff;
border: 1px solid #ccc;
padding: 10px;
}
.close-btn{
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
#ad-left{
float: left;
height: 100%;
width: 50%;
background: #f2f2f2;
padding: 10px;
}
#ad-right{
float: right;
height: 100%;
width: 50%;
background: #f2f2f2;
padding: 10px;
}
</style>
</head>
<body>
<div id="ad-wrapper">
<div id="ad-content">
<div class="close-btn">X</div>
<div id="ad-left">
左侧对联内容
</div>
<div id="ad-right">
右侧对联内容
</div>
</div>
</div>
<script type="text/javascript">
$(window).on('load', function(){
$('#ad-wrapper').fadeIn();
$('.close-btn').click(function(){
$('#ad-wrapper').fadeOut();
})
})
</script>
</body>
</html>
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)