原生js模态框实现
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
#model{
width:500px;
height:300px;
margin-left:-250px;
margin-top:-150px;
background-color: blue;
position:fixed;
top:50%;
left:50%;
z-index: 200;
}
#outer{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:100;
padding-top:10%;
text-align:center;
background-repeat:no-repeat;
background-position:center center;
background-color:#000;
background-color:rgba(0,0,0,0.5);
filter:alpha(opacity=50);
display: none;
}
</style>
</head>
<body>
<button id="show">弹出模态框</button>
<div id="outer">
<div tabindex="-1" id="model"></div>
</div>
<script>
document.getElementById("model").onblur=function(){
document.getElementById("outer").style.display="none"
}
document.getElementById("model").onfocus=function(){
document.getElementById("outer").style.display="block"
}
document.getElementById("show").onclick=function(){
document.getElementById("outer").style.display="block"
}
</script>
</body>
</html>
html中的tabIndex属性可以设置键盘中的TAB键在控件中的移动顺序,即焦点的顺序。
把控件的tabIndex属性设成1到32767的一个值，就可以把这个控件加入到TAB键的序列中。
这样，当浏览者使用TAB键在网页控件中移动时，将首先移动到具有最小tabIndex属性值的控件上，最后在具有最大tabIndex属性值的控件上结束移动。
如果有两个控件的tabIndex属性相同，则以控件在html代码中出现的顺序为准。
默认的tabIndex属性为 0 ，将排列在在所有指定tabIndex的控件之后。
而若把tabIndex属性设为一个负值（如tabIndex="-1"），那么这个链接将被排除在TAB键的序列之外。 如果最初选择了[Tab]键，带这个输入栏的网页会将光标移动到firstName栏。
在给tabIndex特性赋值时，要留意几个问题。下面是几个赋值规则：
带0值tabIndex的元素根据源代码（或默认页面行为）进行排序。
大于0的tabIndex值设定其tab顺序。所有带正tabIndex值的元素出现在所有带0 tabIndex值的元素之前。
如果你犯了一个错误，把同一个tabIndex赋予给多个元素，像其它元素一样，它们会以一个0值tabIndex进行处理。
将tabIndex赋值为-1，则在使用[Tab]键时，此元素被忽略。注意：如果使用-1值时，onfocus与onblur事件仍被启动。 tabIndex的值可为0至32767之间的任意数字 原文地址https://blog.csdn.net/tom0008668/article/details/64904752
原生js模态框实现的更多相关文章
- JS模态框 简单案例
演示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8 ...
- js模态框实现原理
<!DOCTYPE> <html> <head> <style>/* 定义模态对话框外面的覆盖层样式 */ #modal-overlay { visib ...
- 原生js创建模态框（摘自：东窗凝残月 链接：https://www.cnblogs.com/dcncy/p/9076937.html）
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Te ...
- 原生js创建模态框
1.效果图如下: 2.代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- vue.js+koa2项目实战（三）登录注册模态框
登录注册模态框 注: [Vue warn]: Do not use built-in or reserved HTML elements as component id: diaLog 原因:diaL ...
- 【js】再谈移动端的模态框实现
移动端模态框的机制因为与PC的模态框机制一直有所区别,一直是许多新人很容易踩坑的地方,最近笔者作为一条老咸鱼也踩进了一个新坑中,真是平日里代码读得太粗略,故而写上几笔,以儆效尤. 故事的起因是这样的, ...
- js控制Bootstrap 模态框（Modal）插件
js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html
- 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
- 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选 实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...
随机推荐
- 我的Android进阶之旅------>Android使用9Patch图片作为不失真背景
做人要大度,海纳百川,做事要圆滑,左右逢源,这让我想到了编程也是如此,代码要扩展,界面也要考虑自适应. 这篇文章是android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,但是有用. 1 ...
- bzoj3007 解救小云公主
3007: 解救小云公主 Time Limit: 5 Sec Memory Limit: 512 MB Submit: 159 Solved: 71 [id=3007" style=&q ...
- 解决You are using pip version 9.0.1, however version 9.0.3 is available. You should consider upgra
直接运行命令:python -m pip install --upgrade pip
- K-M-P
分段K-M-P 只需要记录上一段已经匹配了的长度,再接着从匹配下一段就可以了.
- ACM解题之（ZOJ 2212) Argus
题目来源: 点击打开题目 题目翻译: 数据流是实时的,连续的,有序的项目序列.一些例子包括传感器数据,互联网流量,金融代码,在线拍卖以及诸如网络使用日志和电话记录之类的交易日志.同样,对流进行的查询在 ...
- MySql安装成功后命令行进行必要的配置
1.1 首次用命令行登录 用zip方式安装成功mysql,并通过net start mysql 命令正常启动mysql服务后,打开dos命令行窗口,输入“mysql -uroot -p”或“mysql ...
- 推荐一款轻量级PHP数据库框架–Medoo
引用官网的简介: 可以加快开发速度的最轻量级的PHP数据库框架 为什么选择Medoo及其主要功能: 轻量级–单个文件,只有20KB 易用–非常容易学习和使用 功能强大–支持各种常见和复杂的SQL查询 ...
- python tkinter组件学习
http://blog.csdn.net/pfm685757/article/details/50162567
- Linux的压缩命令(tar，gzip，zip）
打包和压缩.打包是指将一大堆文件或目录变成一个总的文件:压缩则是将一个大的文件通过一些压缩算法变成一个小文件. 这源于Linux中很多压缩程序只能针对一个文件进行压缩,这样当你想要压缩一大堆文件时,你 ...
- k-近邻算法 标签分类
k-近邻算法根据特征比较,然后提取样本集中特征最相似数据(最邻近)的分类标签.那么,如何进行比较呢? 怎么判断红色圆点标记的电影所属的类别呢? 如下图所示. 答:距离度量.这个电影分类的例子有2个特征 ...