原生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