弹窗的工作原理：在网页中写一个div ,布局到想要显示的位置，将display设为none，隐藏该div。然后通过点击事件或其他操作，利用Js代码，将display设置为block，将div 显示到网页中。

Tips:display:none//隐藏   display: block//显示

效果图：点击弹出一个弹窗按钮，显示弹窗内容

代码：

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <title>弹窗练习</title>
  5.     <meta charset="utf-8">
  6.     <style>
  7.         .btn-pop{
  8.             background-color: #ffd475;
  9.             border-radius: 10px;
  10.             border:0px;
  11.             zoom:200%;
  12.  
  13.         }
  14.         #background-pop{
  15.             display: none;
  16.             position: fixed;
  17.             left: 0;
  18.             top: 0;
  19.             width: 100%;
  20.             height: 100%;
  21.             background-color: rgba(0,0,0,0.5);
  22.         }
  23.         #div-pop{
  24.             background:#ffffff;
  25.             width:30%;
  26.             z-index: 1;
  27.             margin: 12% auto;
  28.             overflow: auto;
  29.         }
  30.         .div-top{
  31.             width: 100%;
  32.             height: auto;
  33.             background-color: #28a3e7;
  34.             color: #ffffff;
  35.         }
  36.         .div-top div{
  37.             padding: 3px 5px 5px 8px;
  38.         }
  39.         span{
  40.             color: white;
  41.             margin-bottom: 10px ;
  42.             margin-left: 20px ;
  43.             cursor: pointer;
  44.             float: right;
  45.         }
  46.         .div-content{
  47.             width: auto;
  48.             height: 200px;
  49.             overflow: auto;
  50.         }
  51.         .div-footer{
  52.             text-align: center;
  53.             background-color: darkgray;
  54.         }
  55.     </style>
  56. </head>
  57. <body>
  58.     <button class="btn-pop" onclick="show()">弹出一个窗口</button>
  59.     <div id="background-pop">
  60.         <div id="div-pop">
  61.             <div class="div-top">
  62.                 <span id="close-button">×</span>
  63.                 <div>弹窗顶部(可以写个标题)</div>
  64.             </div>
  65.             <div class="div-content">
  66.                 放点内容进来<br>
  67.                 点击灰色位置和右上角x关闭弹窗
  68.             </div>
  69.             <div class="div-footer">
  70.                 底部内容
  71.             </div>
  72.         </div>
  73.     </div>
  74. </body>
  75. <script>
  76.         var div = document.getElementById('background-pop');
  77.         var close = document.getElementById('close-button');
  78.         function show(){
  79.             div.style.display = "block";
  80.         }
  81.         close.onclick = function close() {
  82.             div.style.display = "none";
  83.         }
  84.         window.onclick = function close(e) {
  85.             if (e.target == div) {
  86.                 div.style.display = "none";
  87.             }
  88.         }
  89. </script>
  90. </html>

代码：内容同上，多加了详细注释

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <title>弹窗练习</title>
  5.     <meta charset="utf-8">
  6.     <style>     <!-- css样式 -->
  7.         .btn-pop{   <!-- class选择器btn-pop添加样式 -->
  8.             background-color: #ffd475;  <!-- 设置背景颜色 -->
  9.             border-radius: 10px;    <!-- 按钮设置个圆角 -->
  10.             border:0px; <!-- 去掉边框 -->
  11.             zoom:200%;  <!-- 按钮变大两倍 -->
  12.  
  13.         }
  14.         #background-pop{    <!-- id选择器background-pop添加样式 -->
  15.             display: none;  <!-- 设置隐藏 -->
  16.             position: fixed;    <!-- 相对于浏览器窗口的绝对定位，absolute 相对于屏幕 -->
  17.             left: 0;    <!-- 窗口距离右端 -->
  18.             top: 0; <!-- 窗口距离顶部 -->
  19.             width: 100%;   <!-- 宽  100% 填充整个窗口 -->
  20.             height: 100%;   <!-- 高  -->
  21.             background-color: rgba(0,0,0,0.5);  <!-- 设置北京颜色(red,green,blue alpha)  -->
  22.         }
  23.         #div-pop{   <!-- id选择器 -->
  24.             background:#ffffff; <!-- 背景色 -->
  25.             width:30%;  <!-- 宽 -->
  26.             z-index: 1; <!-- 设置堆叠顺序，参数大的在前，默认为0 -->
  27.             margin: 12% auto;   <!-- 外边距 -->
  28.             overflow: auto; <!-- 超过设置大小固定时，超过时，以滚动条显示 -->
  29.         }
  30.         .div-top{   <!-- class选择器div-top -->
  31.             width: 100%;    <!-- 宽 -->
  32.             height: auto;   <!-- 高 默认高度随内部元素高度变化 -->
  33.             background-color: #28a3e7; <!-- 背景颜色 -->
  34.             color: #ffffff; <!-- 字体颜色 -->
  35.         }
  36.         .div-top div{   <!-- class选择器div-top 中的div设置样式 -->
  37.             padding: 3px 5px 5px 8px; <!-- 内边距 ：上 右 下 左， -->
  38.         }
  39.         span{   <!-- span标签添加样式 -->
  40.             color: white;   <!-- 颜色 -->
  41.             margin-bottom: 10px ;   <!-- 底部外边距 -->
  42.             margin-left: 20px ; <!-- 左侧外边距 -->
  43.             cursor: pointer;    <!-- 鼠标指到此处显示为手行 -->
  44.             float: right;   <!-- 浮动：靠右 -->
  45.         }
  46.         .div-content{   <!-- class选择器div-content -->
  47.             width: auto;    <!-- 宽 -->
  48.             height: 200px;  <!-- 高 固定值 -->
  49.             overflow: auto; <!-- 加滚动 -->
  50.         }
  51.         .div-footer{    <!-- class选择器 -->
  52.             text-align: center; <!-- 文字居中 -->
  53.             background-color: darkgray; <!-- 背景色 -->
  54.         }
  55.     </style>
  56. </head>
  57. <body>
  58.     <button class="btn-pop" onclick="show()">弹出一个窗口</button> <!-- 添加一个按钮 ，onclick事件，点击调用JavaScript中的 show()函数-->
  59.     <div id="background-pop"> <!-- 设置id 以便操作和添加样式 -->
  60.         <div id="div-pop">  <!-- 弹窗对应的div -->
  61.             <div class="div-top">   <!-- 弹窗顶部对应的div -->
  62.                 <span id="close-button">×</span>
  63.                 <div>弹窗顶部(可以写个标题)</div>
  64.             </div>
  65.             <div class="div-content">   <!-- 弹窗中间对应的div -->
  66.                 放点内容进来<br>
  67.                 点击灰色位置和右上角x关闭弹窗
  68.             </div>
  69.             <div class="div-footer">    <!-- 弹窗底部对应的div -->
  70.                 底部内容
  71.             </div>
  72.         </div>
  73.     </div>
  74. </body>
  75. <!-- 弹窗的js -->
  76. <script>
  77.         var div = document.getElementById('background-pop'); //声明 div,通过元素id获取节点，为了后续对id选择器background-pop对应的样式进行操作
  78.         var close = document.getElementById('close-button');  //声明 close 通过元素id获取节点，以便为close添加onclick事件
  79.         function show(){    //函数show()将background-pop中的display属性设置为block ，使隐藏的div显示
  80.             div.style.display = "block";
  81.         }
  82.         close.onclick = function close() {  // 点击窗口右上角 ×关闭弹窗；将background-pop中的display属性设置为none ，使其隐藏
  83.             div.style.display = "none";
  84.         }
  85.         window.onclick = function close(e) {//点击页面中灰色部分关闭弹窗；将background-pop中的display属性设置为none ，使其隐藏
  86.             if (e.target == div) {
  87.                 div.style.display = "none";
  88.             }
  89.         }
  90. </script>
  91. </html>

　　

over!!

html,CSS,javascript 做一个弹窗的更多相关文章

  1. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 在开始之前,你需要了解一些基本的知识,不要求你能掌握,但是了解一下还是有益的: HTML 简 ...

  2. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 03

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我还想使用表格,做一个这样的颜色表,如下图所示: 如果按照之前的做法,把每一种颜色都列 ...

  3. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我想使用表格,做一个这样的颜色表,如下图所示: 例 3:我们参照上图,基于上一个例子, ...

  4. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表（目录）

    HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01 HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02 HT ...

  5. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 04

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 目前,我们已经将一些行和列插入到表格中,并设置单元格的背景颜色,显示 RGB 值等. 例 7 ...

  6. 使用Canvas和JavaScript做一个画板

    本文同步于个人博客:https://zhoushuo.me/blog/2018/03/11/drawing-borad/ 前些天学习了HTML5的<canvas>元素,今天就来实践一下,用 ...

  7. 用javascript做一个视频播放器

    以前我们在网页上播放视频,都是要麻烦flash来实现.看着那一大段的<object>真心觉得累.随着html5的不断普及,现在是时候使用html5提供的video元素来做点正经事了,但是要 ...

  8. 【CSS】333- 使用CSS自定义属性做一个前端加载骨架

    点击上方"前端自习课"关注,学习起来~ 我们在打开APP或者网站的时候,经常可以看到这样的效果,在内容加载完成之前,会有一个骨架动画的出现,这种加载方式比传统的进度条方式要友好的多 ...

  9. 如何用JavaScript做一个可拖动的div层

    可拖动的层在Web设计中用处很多,比如在某些需要自定义风格布局的应用中,控件就需要拖动操作,下面介绍一个,希望可以满足你的需求,顺便学习一下可拖动的层是如何实现的. 下面是效果演示: 这个DIV可以移 ...

随机推荐

  1. fiddler抓包url有乱码

    fiddler抓包url有乱码: 解决具体步骤: 注册表:regedit   HKEY_CURRENT_USER\Software\Microsoft\Fiddler2 1.打开注册表,regedit ...

  2. 强化学习-MDP(马尔可夫决策过程)算法原理

    1. 前言 前面的强化学习基础知识介绍了强化学习中的一些基本元素和整体概念.今天讲解强化学习里面最最基础的MDP(马尔可夫决策过程). 2. MDP定义 MDP是当前强化学习理论推导的基石,通过这套框 ...

  3. hdoj:2080

    夹角有多大II Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Sub ...

  4. vs 2015 项目筛选器没了，.h头文件和.cpp文件混在一起了

    场景: git 拉取 VS 2015 项目,打开之后,.h头文件和.cpp文件混在一起了. 解决方案: 需要XXX..vcxproj.filters 文件.

  5. Http url MVC Request Query Form 传参专贴

    一.工具区 [参考]postman中 form-data.x-www-form-urlencoded.raw.binary的区别--转 二..net MVC 三..net WebForm 四.Java ...

  6. 基于【CentOS-7+ Ambari 2.7.0 + HDP 3.0】搭建HAWQ数据仓库02 ——使用ambari-server安装HDP

    本文记录使用ambari-server安装HDP的过程,对比于使用cloudera-manager安装CDH,不得不说ambari的易用性差的比较多~_~,需要用户介入的过程较多,或者说可定制性更高. ...

  7. 浅谈前端JavaScript编程风格

    前言 多家公司和组织已经公开了它们的风格规范,详细可參阅jscs.info,以下的内容主要參考了Airbnb的JavaScript风格规范.当然还有google的编程建议等编程风格 本章探讨怎样使用E ...

  8. 单行显示三级分销记录（同表自join）

    1)首先是一个简单的三级分销(邀请与被邀请),表结构是酱紫的 CREATE TABLE `d_user_invite` ( `invite_id` ) NOT NULL AUTO_INCREMENT, ...

  9. Window应急响应（五）：ARP病毒

    0x00 前言 ARP病毒并不是某一种病毒的名称,而是对利用arp协议的漏洞进行传播的一类病毒的总称,目前在局域网中较为常见.发作的时候会向全网发送伪造的ARP数据包,严重干扰全网的正常运行,其危害甚 ...

  10. Centos7 安装系统服务、开机自启动

    Centos7 安装系统服务 1 编写可执行程序 * 这里可以是任意编程语言(C.C++.Java.PHP.Python.Perl ...)编写的程序: 当前假设此程序的执行目录为: /myservi ...