JS+CSS点击登岸按钮遮罩弹出登岸框代码

发布时间：2018-08-17 03:16:13 所属栏目：活动来源：站长网

导读：前几天，猛火网小编给各人保举了几款关于遮罩层登岸框的结果，是基于 jQuery 实现的，鉴于有的站点还没有引入jquery框架，因此再给各人保举一款行使 Java script实现的遮罩结果登岸框，其拭魅这种结果是很常见的，在很多互动的社区及其余的一些处所，弹出框

　　前几天，猛火网小编给各人保举了几款关于“遮罩层登岸框的结果”，是基于jQuery实现的，鉴于有的站点还没有引入jquery框架，因此再给各人保举一款行使Javascript实现的遮罩结果登岸框，其拭魅这种结果是很常见的，在很多互动的社区及其余的一些处所，弹出框应用想当风行，在不故障网页运行的环境下，用户可以输入登录信息，实现美满登录。

　　示例：

<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>弹出登录框的实当代码</title> </head> <body> <style type="text/css"> body { margin: 0px;padding:0 } #div1 { display: none; position: absolute; z-index: 1000; height: 100%; width: 100%; background: #000000; filter:Alpha(opacity=30); } #div2 { display: none; position: absolute; height: 100%; width: 100%; padding-top: 10%; z-index: 1001; left: 0px; top: 0px; } </style> <script> function openme(){ document.getElementById('div1').style.display='block'; document.getElementById('div2').style.display='block'; } function closeme(){ document.getElementById('div1').style.display='none'; document.getElementById('div2').style.display='none'; } function logo_in(){alert() //验证 //转向... //myform.action="" //myform.submit() closeme(); } </script> <div id="div1"></div> <div id="div2"> <table width="30%" border="0" cellpadding="3" cellspacing="1" style="background: #ff7300; position:static;filter:progid:DXImageTransform.Microsoft.DropShadow(color=#666666,offX=4,offY=4,positives=true)" align="center"> <tr id="m_tr"> <td><font color="#FFFFFF">接待登岸：</font></td> <td align="right"> <input type="button" value="ｘ" onClick="closeme()" style="cursor: hand;"> </td> </tr> <tr> <form name="myform" method="post" > <td colspan="2" width="100%" bgcolor="#FFFFFF" height="150"> username: <input type="text" name="username" size="10"> <br>pasword:<input type="password" name="pasword" size="12"> <br><input type="button" name="logoin" value="登岸" onClick="logo_in()"> <input type="button" name="exit" value="打消" onClick="closeme()"> </td> </form> </tr> </table> </div> <div> <input name="button" type="button" onClick="openme()" value="登岸" /> </div> <br> <div> 简朴的代码 </div> </body> </html><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!