Click on the link to display the prompt box, the prompt box also has links to click.
Move the mouse over the link or remove the prompt box, the prompt box is hidden.
The following I write is not adaptive, if the menu left aligned, the display layer can automatically display on the right? How should I adjust JS?
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>test</title> </pead> <style> body {background-color: #fff; font-si ze:14px; Color: #666;} #link-url a {display:block; height:30px; line-height:30px;width:100px; color: #666; Text-decoration:none;cursor: pointer;} #link-url a:hover {background: #ccc;} #d-k{position:relative margin:0px 0px 0px 0px;z-index:0;} #Layer1, #Layer2, #Layer3, #Layer4, #Layer5 {position:absolute; left:70px; top:0px;right:70px;} #show-k{margin:0px 0px 0px 0px;position:relative;background-color: #000; border: #ccc 1px solid; height:100px;z-index:3 ; Filter:alpha (opacity=70); opacity:0.7; width:500px;} </style> <script language= "JavaScript" > Function change (x) {document.getElementById (x). style.display = " None ";} function Onclickbox (y) {documenT.getelementbyid (y). Style.display = "";} function Onmouseoutbox (z) {document.getElementById (z). style.display = "None";} function Onmouseoverbox (a) {document.getElementById (a). Style.display = "";} </script> <body> <div id= "Link-url" > <table width= "" cellspacing= "5" > <tr> <td> <div id= "D-k" > I click on a <div id= "Layer1" onmouseover= "Onmouseoverb" Ox (' Layer1 ') "onmouseout=" Onmouseoutbox (' Layer1 ') "> <div id=" show-k "> < Table width= "100%" border= "0" cellpadding= "0" cellspacing= "0" > <tr> <td>1sty and LESDF Human and human and 11</td> <td> Human and human and human and human and human and </td> <td>33 Human and human and human and human and 3</td> <td>44, human and human and human and human and human and human and human and 4</td> </tr> </table> </div> </div> </div> </td> </tr> <tr> ; <td> <div id= "D-k" > I click on a <div id= "Layer2" onmouseover= "Onmouseoverbox" (' Layer2 ') "onmouseout=" Onmouseoutbox (' Layer2 ') "> <div id=" show-k "> <tabl E width= "100%" border= "0" cellpadding= "0" cellspacing= "0" > <tr> & Lt;td>111</td> <td>222</td> <td>333</td> ; <td>444</td> </tr> </table> </div& Gt </div> </div> </td> </tr> <tr> <td> <div Id= "D-k" > I clicked on a <div id= "Layer3" onmouseover= "Onmouseoverbox" (' Layer3 ') "onmouseout=" Onmouseoutbox (' Layer3 ') "> <div id=" show-k "> <tab Le width= "100%" border= "0" cellpadding= "0" cellspacing= "0" > <tr> <td>111</td> <td>222</td> <TD>333</TD&G T <td>444</td> </tr> </table> </div& Gt </div> </div> </td> </tr> <tr> <td> <div Id= "D-k" > I click on a <div id= "Layer4" onmouseover= "Onmouseoverbox" (' Layer4 ') "onmouseout=" onmouseout Box (' Layer4 ') "> <div id=" show-k "> <table width=" 100% "border=" 0 "Cellpa dding= "0" cellspacing= "0" > <tr> <td>111</td> <td>222</td> <td>333</td> <td>444</td> </tr> </table> </div> </div> </div> </td> </tr> <tr> <td> <div id= "D-k" > I click on a <div id= "Layer5" onmouseover= "OnMouseOver" Box (' Layer5 ') "onmouseout=" Onmouseoutbox (' Layer5 ') "> <div id=" show-k "> ; Table width= "100%" border= "0" cellpadding= "0" cellspacing= "0" > <tr> <td>111</td> <td>222</td> <td>333</ td> <td>444</td> </tr> </tabl E></div> </div> </div> </td> </tr> </table> </d iv> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Left alignment effect
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>test</title> </pead> <style> body {background-color: #fff; font-si ze:14px; Color: #666;} #link-url a {display:block; height:30px; line-height:30px;width:100px; color: #666; Text-decoration:none;cursor: pointer;} #link-url a:hover {background: #ccc;} #d-k{position:relative margin:0px 0px 0px 0px;z-index:0;} #Layer1, #Layer2, #Layer3, #Layer4, #Layer5 {position:absolute; left:70px; top:0px;right:70px;} #show-k{margin:0px 0px 0px 0px;position:relative;background-color: #000; border: #ccc 1px solid; height:100px;z-index:3 ; Filter:alpha (opacity=70); opacity:0.7; width:500px;} </style> <script language= "JavaScript" > Function change (x) {document.getElementById (x). style.display = " None ";} function Onclickbox (y) {documenT.getelementbyid (y). Style.display = "";} function Onmouseoutbox (z) {document.getElementById (z). style.display = "None";} function Onmouseoverbox (a) {document.getElementById (a). Style.display = "";} </script> <body> <div id= "Link-url" > <table width= "align=" "Right" cellspacing= "5" > <tr> <td> <div id= "D-k" > I click on a <div id= "Layer1" OnMouseOver = "Onmouseoverbox (' Layer1 ')" onmouseout= "Onmouseoutbox (' Layer1 ')" > <div id= "show-k" > <table width= "100%" border= "0" cellpadding= "0" cellspacing= "0" > <tr> <td>1sty and LESDF Human and human and 11</td> <td> Human and human and human and human and human and </td> <td>33 Human and human and human and human and 3</td> <td>44 Human and human and human and human and human and human and human and person 4</td> </tr> </table> </div> </div> </div> </td> </tr> <tr> <td> <div id= "D-k" > I click on a <div id= "Layer2" onmous Eover= "Onmouseoverbox (' Layer2 ')" onmouseout= "Onmouseoutbox (' Layer2 ')" > <div id= "show-k" > <table width= "100%" border= "0" cellpadding= "0" cellspacing= "0" > <tr> <td>111</td> <td>222</td> <td>333</td> <td>444</td> </tr> </table> </div> </div> </div> </td> </tr> <tr> <td> <div id= "D-k" > I click on a <div id= "Layer3" onmouseover= "ONmouseoverbox (' Layer3 ') "onmouseout=" Onmouseoutbox (' Layer3 ') "> <div id=" show-k "> <table width= "100%" border= "0" cellpadding= "0" cellspacing= "0" > <tr> <td>111</td> <td>222</td> <TD&G T;333</td> <td>444</td> </tr> </table> </div> </div> </div> </td> < /tr> <tr> <td> <div id= "D-k" > I click on a <div id= "Layer4" on Mouseover= "Onmouseoverbox (' Layer4 ')" onmouseout= "Onmouseoutbox (' Layer4 ')" > <div id= "show-k" > <table width= "100%" border= "0" cellpadding= "0" cellspacing= "0" > <tr> <td>111</td> <td>222</td> <td>333</td > <td>444</td> </tr> </table& Gt </div> </div> </div> </td> </tr> <tr> &L t;td> <div id= "D-k" > I click one <div id= "Layer5" onmouseover= "Onmouseoverbox" (' La Yer5 ') "onmouseout=" Onmouseoutbox (' Layer5 ') "> <div id=" show-k "> <table Width= "100%" border= "0" cellpadding= "0" cellspacing= "0" > <tr> ;td>111</td> <td>222</td> <td>333</td> <td>444</td> </tr> </table> </div> </div> </div> </td> </tr> </tab le> </div> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
