html点击出现表单弹窗

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

要在HTML中实现点击出现表单的弹窗，你可以使用JavaScript和CSS来创建弹窗效果。以下是一个简单的例子：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup Form</title>
<style>
  /* 弹窗的基本样式 */
  #popup {
    width: 500px;
    padding: 20px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border: 1px solid #ddd;
    display: none;
    z-index: 10;
  }
  /* 遮罩层的样式 */
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 9;
  }
</style>
</head>
<body>
 
<!-- 触发弹窗的按钮 -->
<button id="open-popup">打开表单</button>
 
<!-- 遮罩层 -->
<div class="overlay" id="overlay"></div>
 
<!-- 弹窗表单 -->
<div id="popup">
  <form action="">
    <h2>表单标题</h2>
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name">
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email">
    <input type="submit" value="提交">
    <button id="close-popup">关闭</button>
  </form>
</div>
 
<script>
  // JavaScript 控制弹窗的显示和隐藏
  document.getElementById('open-popup').onclick = function() {
    document.getElementById('overlay').style.display = 'block';
    document.getElementById('popup').style.display = 'block';
  }
  document.getElementById('close-popup').onclick = function() {
    document.getElementById('overlay').style.display = 'none';
    document.getElementById('popup').style.display = 'none';
  }
</script>
 
</body>
</html>

这段代码中，我们定义了一个简单的弹窗表单和一个触发它的按钮。当按钮被点击时，遮罩层显示，而弹窗也会以中心对齐的方式出现。关闭按钮会隐藏遮罩层和弹窗。这个例子使用了基本的CSS样式和JavaScript来实现功能。

html点击出现表单弹窗

评论已关闭

推荐阅读