JS+CSS点击登陆按钮遮罩弹出登陆框代码
2014-06-26 00:17
513 查看
前几天,烈火网小编给大家推荐了几款关于“遮罩层登陆框的效果”,是基于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="x" 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>
相关文章推荐
- JS+CSS点击弹出登陆框代码
- 点击按钮Alert弹出遮罩层效果的提示框代码
- JS点击某个图标或按钮弹出文件选择框的实现代码
- JS 点击按钮后弹出遮罩层,有关闭按钮
- JS 点击按钮后弹出遮罩层,有关闭按钮
- 点击弹出居中的遮罩层代码
- 点击弹出居中的遮罩层代码 .
- 点击放大图片js+css代码,可以关闭
- Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
- JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮
- 7080登陆界面点击服务器管理按钮,无法弹出窗口,报错
- CSS+JS方法去除点击链接,按钮时出现的虚线框
- 防止频繁点击按钮的js代码
- 如何点击按钮弹出新窗口,输入数据后返回并刷新页面?(C#代码)
- div+css+jQuery图片横向滚动代码(带左右点击按钮)
- 如何点击按钮弹出新窗口,输入数据后返回并刷新页面?(C#代码)
- jQuery点击按钮后弹出遮罩层,有关闭按钮
- Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
- 点击按钮弹出新窗口,输入数据后返回并刷新页面(C#代码) 窗口互传值(转)
- JS+CSS实现单击后的弹出菜单代码