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

发布时间：2018-10-21 18:23:38 所属栏目：活动来源：站长网

导读：前几天，烈火网小编给大家推荐了几款关于遮罩层登陆框的效果，是基于 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>
提示：可修改后代码再运行!

（编辑：西安站长网）

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