js实现页面弹框

最新推荐文章于 2024-07-30 17:19:26 发布

qq_75222206

最新推荐文章于 2024-07-30 17:19:26 发布

阅读量2k

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_75222206/article/details/131791198

版权

页面弹框是前端网页制作很常见的一个部分。点击按钮后自动弹出弹框，弹框中可以输入想输入的东西。那就让我们一起看看该如何去制作

技术准备

需求：JavaScript+html+css

实现过程

首先使用form定义一个表单，表单内容可以自定义随便输入。笔者输入的是选择武器和购买数量

代码展示：

<body>
<form id="myForm" action="Arsenal.jsp"><font size="5px" face="华文新魏">请选择武器:</font><br><br>
     <font size="5px" face="华文新魏">坦克  </font> <input type="checkbox"   id="a" value="坦克" name="choice" style="width: 30px; height: 30px;">
     <font size="5px" face="华文新魏">请输入武器数量:</font><input type="number" id="number1" name="number1" size="20px" style="width: 120px; height: 20px;"><br><br>
     <font size="5px"face="华文新魏">榴弹炮</font><input type="checkbox" id="b" value="榴弹炮" name="choice" size="20px" style="width: 30px; height: 30px;">
        <font size="5px" face="华文新魏">请输入武器数量:</font><input type="number" id="number1" name="number2" size="20px" style="width: 120px; height: 20px;"><br><br>
     <font size="5px" face="华文新魏">火箭炮</font><input type="checkbox" id="c" value="火箭炮" name="choice" size="20px" style="width: 30px; height: 30px;">
     <font size="5px" face="华文新魏">   请输入武器数量:</font><input type="number" id="number1" name="number3" size="20px" style="width: 120px; height: 20px;"><br><br>
    <br>
    <br>
    <br>
    <input type="submit" value="确认">
  </form>
</body>

接着我们要设计弹窗的透明样式，这个需要借助css来实现。css将表单隐藏，并且确定弹出框表单的位置

代码如下：

<style>
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}
 #formContainer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  display: none;
}
</style>

最后我们需要设计js部分。js首先要获取表单id，可以使用document.getElementById方法。获取完之后，将点击部分属性设置成block（展示），此外我们还需要设计个关闭按钮，关闭按钮对应属性设置成none。由于需要与css部分相连接，调用的时候还需要把表单容器以及遮罩层给调用

代码如下：

<script>
var showFormButton = document.getElementById("showFormButton");
var overlay = document.getElementById("overlay");
var formContainer = document.getElementById("formContainer");
var closeButton = document.getElementById("closeButton");
 showFormButton.addEventListener("click", function() {
  overlay.style.display = "block";
  formContainer.style.display = "block";
});
 closeButton.addEventListener("click", function() {
  overlay.style.display = "none";
  formContainer.style.display = "none";
});
</script>

效果图