超级简单的js弹窗教程，适合小小白学习

最新推荐文章于 2022-05-21 23:17:30 发布

原创最新推荐文章于 2022-05-21 23:17:30 发布 · 1.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #js

web前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个初学者友好的简易弹窗实现方法，使用HTML、CSS和JavaScript，详细讲解了如何创建、显示和关闭弹窗的过程。

经常有初学前端的小伙伴遇到页面需要弹窗的时候，不知道该怎么办，网上找的教程又特别难，楼主本人也是一个名初学小白，经常遇到这种情况，于是就干脆自己写一个简单的表单弹窗，供大家学习：

首先先理清下思路：

第一步先把要显示的弹窗写好：

然后同时给这个框添加css：

然后预览一下看看效果：

好了，一个窗口就写好了，下一步就是要把这个弹窗隐藏，因为我们最终的目的是通过一个按钮的触发，来显示这个弹窗；我们给这个弹窗加一个display:none;来隐藏一下；

好了，再来预览下效果：

下面我来做一个按钮，让后通过按钮的触发效果，来显示这个弹窗；

这里做了两个，以便更好的应用到不同的环境下，触发命令是点击，然后给tc()写一个控制：

当我们点击按事件，触发弹窗的css从display:none 变成display:block;弹窗就显示出来了

弹窗出来之后，我们再给他加一个关闭的地方，如法炮制：

加个框；然后给框写好css

显示就这样了：

如图所示给按钮添加一个事件：

最终我们的简易弹窗就做好了，不知道啥原因，上传不了文件，就把源码贴在下面了，互相学习，新手初识，不到之处，请多多指点！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>Document</title>
</head>
<style>

   .ccc{
       width: 200px;
       height: 200px;
       border: 1px solid green;
       position: absolute;
          left: 50%;
          top: 30%;
          background: green;
          display: none;
   }
   .ccc .ccc1{
       width: 100%;
       height: 40px;
       background: white;
   }
   .ccc .ccc1 span{
       width: 16px;
       height: 16px;
       display: block;
       float: right;
       cursor: pointer;
   }