以防浪费大家的时间,还是先上效果图吧,满足您的需求就往下look吧。

重要知识点:点击其他地方,也就是除了小叉子之外的地方也能够关闭弹窗哦。代码已标红

   html代码:

  <button id="btn" onclick="openframe()">点击弹出</button>
  <div id="modal">
  <div class="win">
  <p>我是弹框中的内容</p>
  <span class="close" onclick="closeframe()">×</span>
  </div>
  </div>

css代码:

  *{
  margin: 0;
  padding: 0;
  }

  body{
  width: 100%;
  background-color: #ececec;
  }
  button{
  background-color: transparent;
  border: 1px solid dodgerblue;
  background-color: #1E90FF;
  color: #fff;
  border-radius:2px;
  margin: 20px 20px;
  width: 5%;
  cursor: pointer;
  }
  #modal{
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0,0,0,.4);
  display: none;
  z-index: 999;
  }
  #modal .win{
  width: 80%;
  height: 120px;
  background-color: lightgoldenrodyellow;
  margin: 300px auto;
  position: relative;
  }
  .win span{
  position: absolute;
  right: 5px;
  top:-8px;
  font-size: 30px;
  color: #333;
  cursor: pointer;
  }
  .win p{
  padding-top: 50px;
  text-align: center;
  }

 js代码:

  var btn=document.getElementById("btn");
  var modal=document.getElementById("modal");
  var close=document.getElementsByClassName("close");
  //点击按钮,弹出弹框
  function openframe(){
  modal.style.display="block";
  }
  //点击叉号,关闭弹窗
  function closeframe(){
  modal.style.display="none";
  }
  //点击其他地方窗口隐藏
  window.onclick=function(e){
  if(e.target==modal){
  modal.style.display="none";
  }
  }

每篇随笔必加内容:

小白一枚,如有大神路过请手下留情,多多指教哦。

原生js控制控制--弹窗的显示和隐藏的更多相关文章

  1. JS控制HTML元素的显示和隐藏

    JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...

  2. 利用来JS控制页面控件显示和隐藏有两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一:  1 2 document.getEle ...

  3. 使用JavaScript控制HTML元素的显示和隐藏

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...

  4. js如何实现点击显示和隐藏表格

    js如何实现点击显示和隐藏表格 一.总结 一句话总结: 1.给table或者table里面的元素添加点击事件, 2.然后判断当前表格的数据显示或者隐藏, 3.然后通过display属性显示(非none ...

  5. 控制HTML元素的显示与隐藏——display和visibility

    有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现.通过下面的例子了解display和visibility的区别,简单的例子代 ...

  6. jquery怎么实现点击一个按钮控制一个div的显示和隐藏

    示例html 1 2 <div class="abc" style="display:none"></div> <input ty ...

  7. 使用原生js来控制、修改CSS伪元素的方法总汇, 例如:before和:after

    在网页中,如果需要使用辅助性/装饰性的内容的时候,我们不应该直接写在HTML中,这样会影响真正的内容,这就需要使用伪元素了,这是由于css的纯粹语义化是没有意义的.在使用伪元素的时候,会发现js并不真 ...

  8. 原生 js 模拟 alert 弹窗

    复制头部的 js 代码到你的 js 文件的任何地方,调用Chef.alert方法传入相应的参数即可并没有什么功能,只是一个提示的作用,可能样式比 alert 的弹窗好看点,css是写在js里的,只要你 ...

  9. ExtJS4 自己主动生成控制grid的列显示、隐藏的checkbox

    因为某种原因.须要做一个控制grid列显示的checkboxgroup,尽管EXTJS4中的gridpanel自带列表能够来控制列的显示隐藏,可是有这种需求(须要一目了然) 以下先上图 waterma ...

随机推荐

  1. LeetCode链表简单题

    一.21合并两个有序链表 代码如下: class Solution: def mergeTwoLists(self, l1: ListNode, l2: ListNode) -> ListNod ...

  2. CentOS安装部署sha##dow**socks

    注意事项,pip版本不能太低,实测9.0.3可行(需要python 2.7,低版本python升级办法另有文章介绍). pip --version 以shadowsocks-2.8.2为例: pip ...

  3. 如何将/etc/issue文件中的内容转换为大写后保存至/tmp/issue.out文件中

    cat /etc/issue|tr '[:lower:]' [:upper:] >> /tmp/issue.out

  4. npm errno -4048错误

    这种错误是缓存原因导致的,首先清除缓存 npm cache clean --force 然后校验缓存依赖的完整和有效性 npm cache verify 最后重新安装即可

  5. 1000行MySQL学习笔记

    /* 启动MySQL */ net start mysql /* 连接与断开服务器 */ mysql -h 地址 -P 端口 -u 用户名 -p 密码 /* 跳过权限验证登录MySQL */ mysq ...

  6. 最长上升子序列(LIS) Medium2

    JGShining's kingdom consists of 2n(n is no more than 500,000) small cities which are located in two ...

  7. HDU - 1845 Jimmy’s Assignment (二分匹配)

    Description Jimmy is studying Advanced Graph Algorithms at his university. His most recent assignmen ...

  8. 1、Java调用C语言(本地法)

    这是一个比较麻烦的方法..   一.首先,你要先安装一个VC,我的装在了D:\software\C++\Microsoft Visual Studio   二.我的jdk安装目录是D:\Program ...

  9. 计算机系统结构总结_Memory Review

    这次就边学边总结吧,不等到最后啦 Textbook: <计算机组成与设计——硬件/软件接口>  HI <计算机体系结构——量化研究方法>       QR Ch3. Memor ...

  10. 剑指offer-链表中环的入口结点-链表-python ***

    题目描述 给一个链表,若其中包含环,请找出该链表的环的入口结点,否则,输出null. 思路 第一步,用两个快慢指针找环中相汇点.分别用slow, fast指向链表头部,slow每次走一步,fast每次 ...