HTML——广告弹窗

这篇文章距离上次修改已过201天，其中的内容可能已经有所变动。

在HTML中创建一个简单的广告弹窗，可以使用以下代码示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advertisement Popup</title>
<style>
  /* 弹窗的样式 */
  .modal {
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定位置 */
    z-index: 1; /* 位于顶层 */
    left: 0;
    top: 0;
    width: 100%; /* 宽度全屏 */
    height: 100%; /* 高度全屏 */
    background-color: rgba(0,0,0,0.5); /* 半透明背景 */
  }
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 垂直居中 */
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }
</style>
</head>
<body>
 
<button id="openBtn">打开广告</button>
 
<div id="myModal" class="modal">
  <div class="modal-content">
    <span id="closeBtn">&times;</span>
    <img src="ad-image.jpg" alt="广告图片" style="width:100%;">
  </div>
</div>
 
<script>
// 打开弹窗的函数
function openModal() {
  document.getElementById('myModal').style.display = 'block';
}
 
// 关闭弹窗的函数
function closeModal() {
  document.getElementById('myModal').style.display = 'none';
}
 
// 获取按钮，并添加点击打开弹窗的事件监听器
var openBtn = document.getElementById('openBtn');
openBtn.addEventListener('click', openModal);
 
// 获取关闭按钮，并添加点击关闭弹窗的事件监听器
var closeBtn = document.getElementById('closeBtn');
closeBtn.addEventListener('click', closeModal);
</script>
 
</body>
</html>

这段代码中，我们定义了一个简单的弹窗，其中包含关闭按钮和广告图片。用户点击"打开广告"按钮后，弹窗会显示，点击"×"按钮或者背景遮罩即可关闭弹窗。这个例子展示了如何使用HTML、CSS和JavaScript创建一个基本的弹窗效果。

HTML——广告弹窗

评论已关闭

推荐阅读