<!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