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

　　前几天，烈火网小编给大家推荐了几款关于“遮罩层登陆框的效果”，是基于jQuery实现的，鉴于有的站点还没有引入jquery框架，因此再给大家推荐一款使用Javascript实现的遮罩效果登陆框，其实这种效果是很常见的，在许多互动的社区及其它的一些地方，弹出框应用想当流行，在不妨碍网页运行的情况下，用户可以输入登录信息，实现完美登录。

　　示例：

<head><br /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"><br /> <title>弹出登录框的实现代码</title><br /> </head><br /> <body><br /> <style type="text/css"><br /> body {<br /> margin: 0px;padding:0<br /> }<br /> #div1 {<br /> display: none;<br /> position: absolute;<br /> z-index: 1000;<br /> height: 100%;<br /> width: 100%;<br /> background: #000000;<br /> filter:Alpha(opacity=30);<br /> }<br /> #div2 {<br /> display: none;<br /> position: absolute;<br /> height: 100%;<br /> width: 100%;<br /> padding-top: 10%;<br /> z-index: 1001;<br /> left: 0px;<br /> top: 0px;<br /> }<br /> </style><br /> <script><br /> function openme(){<br /> document.getElementById('div1').style.display='block';<br /> document.getElementById('div2').style.display='block';<br /> }<br /> function closeme(){<br /> document.getElementById('div1').style.display='none';<br /> document.getElementById('div2').style.display='none';<br /> }<br /> function logo_in(){alert()<br /> //验证<br /> //转向...<br /> //myform.action=""<br /> //myform.submit()<br /> closeme();<br /> }<br /> </script><br /> <div id="div1"></div><br /> <div id="div2"><br /> <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"><br /> <tr id="m_tr"><br /> <td><font color="#FFFFFF">欢迎登陆：</font></td><br /> <td align="right"><br /> <input type="button" value="ｘ" onClick="closeme()" style="cursor: hand;"><br /> </td><br /> </tr><br /> <tr><br /> <form name="myform" method="post" ><br /> <td colspan="2" width="100%" bgcolor="#FFFFFF" height="150"><br /> username: <input type="text" name="username" size="10"><br /> <br>pasword:<input type="password" name="pasword" size="12"><br /> <br><input type="button" name="logoin" value="登陆" onClick="logo_in()"><br /> <input type="button" name="exit" value="取消" onClick="closeme()"><br /> </td><br /> </form><br /> </tr><br /> </table><br /> </div><br /> <div><br /> <input name="button" type="button" onClick="openme()" value="登陆" /><br /> </div><br /> <br><br /> <div><br /> 简单的代码<br /> </div><br /> </body><br /> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

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

由 dawei

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性

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

由 dawei

相关文章

网站优化的整个完整步骤

基于PHP实现发微博动态代码实例

PHP文件操作简单介绍及函数汇总

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性