原生js控制控制--弹窗的显示和隐藏
以防浪费大家的时间,还是先上效果图吧,满足您的需求就往下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控制控制--弹窗的显示和隐藏的更多相关文章
- JS控制HTML元素的显示和隐藏
JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...
- 利用来JS控制页面控件显示和隐藏有两种方法
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 document.getEle ...
- 使用JavaScript控制HTML元素的显示和隐藏
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...
- js如何实现点击显示和隐藏表格
js如何实现点击显示和隐藏表格 一.总结 一句话总结: 1.给table或者table里面的元素添加点击事件, 2.然后判断当前表格的数据显示或者隐藏, 3.然后通过display属性显示(非none ...
- 控制HTML元素的显示与隐藏——display和visibility
有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现.通过下面的例子了解display和visibility的区别,简单的例子代 ...
- jquery怎么实现点击一个按钮控制一个div的显示和隐藏
示例html 1 2 <div class="abc" style="display:none"></div> <input ty ...
- 使用原生js来控制、修改CSS伪元素的方法总汇, 例如:before和:after
在网页中,如果需要使用辅助性/装饰性的内容的时候,我们不应该直接写在HTML中,这样会影响真正的内容,这就需要使用伪元素了,这是由于css的纯粹语义化是没有意义的.在使用伪元素的时候,会发现js并不真 ...
- 原生 js 模拟 alert 弹窗
复制头部的 js 代码到你的 js 文件的任何地方,调用Chef.alert方法传入相应的参数即可并没有什么功能,只是一个提示的作用,可能样式比 alert 的弹窗好看点,css是写在js里的,只要你 ...
- ExtJS4 自己主动生成控制grid的列显示、隐藏的checkbox
因为某种原因.须要做一个控制grid列显示的checkboxgroup,尽管EXTJS4中的gridpanel自带列表能够来控制列的显示隐藏,可是有这种需求(须要一目了然) 以下先上图 waterma ...
随机推荐
- LeetCode链表简单题
一.21合并两个有序链表 代码如下: class Solution: def mergeTwoLists(self, l1: ListNode, l2: ListNode) -> ListNod ...
- CentOS安装部署sha##dow**socks
注意事项,pip版本不能太低,实测9.0.3可行(需要python 2.7,低版本python升级办法另有文章介绍). pip --version 以shadowsocks-2.8.2为例: pip ...
- 如何将/etc/issue文件中的内容转换为大写后保存至/tmp/issue.out文件中
cat /etc/issue|tr '[:lower:]' [:upper:] >> /tmp/issue.out
- npm errno -4048错误
这种错误是缓存原因导致的,首先清除缓存 npm cache clean --force 然后校验缓存依赖的完整和有效性 npm cache verify 最后重新安装即可
- 1000行MySQL学习笔记
/* 启动MySQL */ net start mysql /* 连接与断开服务器 */ mysql -h 地址 -P 端口 -u 用户名 -p 密码 /* 跳过权限验证登录MySQL */ mysq ...
- 最长上升子序列(LIS) Medium2
JGShining's kingdom consists of 2n(n is no more than 500,000) small cities which are located in two ...
- HDU - 1845 Jimmy’s Assignment (二分匹配)
Description Jimmy is studying Advanced Graph Algorithms at his university. His most recent assignmen ...
- 1、Java调用C语言(本地法)
这是一个比较麻烦的方法.. 一.首先,你要先安装一个VC,我的装在了D:\software\C++\Microsoft Visual Studio 二.我的jdk安装目录是D:\Program ...
- 计算机系统结构总结_Memory Review
这次就边学边总结吧,不等到最后啦 Textbook: <计算机组成与设计——硬件/软件接口> HI <计算机体系结构——量化研究方法> QR Ch3. Memor ...
- 剑指offer-链表中环的入口结点-链表-python ***
题目描述 给一个链表,若其中包含环,请找出该链表的环的入口结点,否则,输出null. 思路 第一步,用两个快慢指针找环中相汇点.分别用slow, fast指向链表头部,slow每次走一步,fast每次 ...