<!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模态框实现的更多相关文章

  1. JS模态框 简单案例

    演示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8 ...

  2. js模态框实现原理

    <!DOCTYPE> <html> <head> <style>/* 定义模态对话框外面的覆盖层样式 */ #modal-overlay { visib ...

  3. 原生js创建模态框（摘自：东窗凝残月 链接：https://www.cnblogs.com/dcncy/p/9076937.html）

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Te ...

  4. 原生js创建模态框

    1.效果图如下: 2.代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  5. vue.js+koa2项目实战（三）登录注册模态框

    登录注册模态框 注: [Vue warn]: Do not use built-in or reserved HTML elements as component id: diaLog 原因:diaL ...

  6. 【js】再谈移动端的模态框实现

    移动端模态框的机制因为与PC的模态框机制一直有所区别,一直是许多新人很容易踩坑的地方,最近笔者作为一条老咸鱼也踩进了一个新坑中,真是平日里代码读得太粗略,故而写上几笔,以儆效尤. 故事的起因是这样的, ...

  7. js控制Bootstrap 模态框（Modal）插件

    js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

  8. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  9. 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

    原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...

随机推荐

  1. iOS 载入图片选择imageNamed 方法还是 imageWithContentsOfFile？

    Apple官方的文档为生成一个UIImage对象提供了两种方法: 1. imageNamed,其參数为图片的名字. 2. imageWithContentsOfFile,其參数也是图片文件的路径. 那 ...

  2. 《Python 机器学习》笔记（一）

    赋予计算机学习数据的能力 涵盖: 1.机器学习的一般概念 2.机器学习方法的三种类型和基本术语 3.成功构建机器学习系统所需的模块 机器学习的三种不同方法 1.监督学习 2.无监督学习 3.强化学习 ...

  3. linux环回文件

    我们通常在设备上(比如磁盘分区)上创建文件系统,这些存储设备能够以设备文件的形式来使用,如/dev/device_name.为了使用存储设备上的文件系统,我们将其挂载到挂载点. 环回文件系统是指那些在 ...

  4. mysql用户管理（新增用户及权限管理）

    一.登录: # mysql  –u  root  –p  回车输入密码 退出: #exit; 二.修改密码: 格式:mysqladmin  –u 用户名 –p旧密码  password  新密码 # ...

  5. Ajax在jQuery中的应用---ajax()方法

    在jQuery中,$.ajax()方法是最底层的方法,也是功能最强的方法.其调用的语法格式为: $.ajax([options]) 其中,可选项参数[options]为$.ajax()方法中的请求设置 ...

  6. Python学习进程（11）日期和时间

        本节介绍Python应用程序处理时间和日期的方式.其中转换日期格式是最常用的功能.     (1)获取时间戳: Python 提供了一个 time 和 calendar 模块可以用于格式化日期 ...

  7. INSPIRED启示录 读书笔记 - 第3章 产品管理与项目管理

    互联网让两者变得不同 在传统的零售软件领域,产品经理常常兼任项目经理的工作,随着互联网的发展,两者的职责区别也越来越明显 产品管理的职责是探索(定义)有价值的.可用的.可行的产品 项目管理的职责是关注 ...

  8. Threalocal的使用及其原理

    虽然现在可以说很多程序员会用ThreadLocal,但是我相信大多数程序员还不知道ThreadLocal,而使用ThreadLocal的程序员大多只是知道其然而不知其所以然,因此,使用ThreadLo ...

  9. Openfire部署和配置说明

    一.程序部署 1.1 程序和脚本 将文件拷贝到对应目录下,文件包括:Openfire.tar和setup.sh脚本.Openfire.tar为可执行文件库.配置等的压缩包,setup.sh为解压和部署 ...

  10. Datax官方笔记总结

    # DataX DataX 是阿里巴巴集团内被广泛使用的离线数据同步工具/平台,实现包括 MySQL.SQL Server.Oracle.PostgreSQL.HDFS.Hive.HBase.OTS. ...