<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>

转载于:https://www.cnblogs.com/shenjun/p/3195070.html

JS+CSS点击弹出登陆框代码相关推荐

  1. 基于jQuery鼠标点击弹出登陆框效果

    基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览    源码下载 实现的代码. html代码: <input type=&quo ...

  2. html悬浮弹窗后面背景变深,JS+CSS实现Div弹出窗口同时背景变暗的方法

    本文实例讲述了JS+CSS实现Div弹出窗口同时背景变暗的方法.分享给大家供大家参考.具体实现方法如下: 代码如下: JS+CSS实现的Div弹出窗口,同时背景变暗 function    locki ...

  3. outlook显示服务器错误,Outlook,弹出登陆框,无法登陆 服务器错误0x800CCC90 错误号:0...

    0 摘要:客户端症状: 一直弹出登陆框,填写正确ID及密码确认后依然如此.点取消,然后接收邮件会提示以下信息: 无法使用安全密码身份验证登陆到服务器.......服务器响应:-ERR bad comm ...

  4. JS的三种弹出提示框(alert、confirm、prompt)

    三种弹出提示框 1.alert() 2.confirm() 3.prompt() 1.alert() 方法会弹出一个警告框,只有确定按钮 alert('这是个警告框') 2.comfim() 会弹出一 ...

  5. js+jquery手写弹出提示框

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 百度地图android弹出窗口,【代码】Android百度地图点击弹出信息框

    分享给大家一篇技术文章,还有很多不足之处,欢迎吐槽!期待各位android爱好者,加入android交流群:278744577,加群请验证:qy88,共同探讨! 如图: 我是在百度的demo上改的主要 ...

  7. JS关闭浏览器 (不弹出提示框)

    如果网页不是通过脚本程序打开的(window.open()),调用window.close()脚本关闭窗口前,必须先将window.opener对象置为null,否则浏览器(IE7.IE8)会弹出一个 ...

  8. 冒险岛2官网模拟之三单击登录弹出登陆框的具体实现(连载)

    登录框的设计的样式以及结构思路 在样式中需要设置登录的unlogin盒子,以及登录框login-web盒子,最后写一个全局的cover-bg来做遮罩层.但是设置样式的时候将cover-bg设置为定位这 ...

  9. html点击弹出文本框,html制作,点击文字超链接显示文本框,再点击文字超链接隐藏文本框...

    window.οnlοad=function(){ document.getElementById('click').οnclick=function(){ if (document.getEleme ...

最新文章

  1. java interface class_Java中常量定义在interface和class的区别(转)
  2. JAVA基础代码分享--学生成绩管理
  3. 盘点区块链的2018:技术与工具演进篇
  4. c语言键盘控制数码管显示,3*4矩阵键盘控制4位数码管显示的C程序
  5. rtsp,rtp,gb28181直接转化为html5播放(二)
  6. linux下qt生成dll,Qt 创建和使用动态链接库 - cibiren2011的专栏 - 博客频道 - CSDN.NET...
  7. MAC常用java开发软件
  8. 服务器没有网卡驱动怎么看网卡型号,[怎么看网卡设备]怎么查看网卡驱动
  9. 「镁客·请讲」艾拉比芮亚楠:当OTA普及,我们将在物联网和车联网看到三个变化...
  10. PyG MessagePassing机制源码分析
  11. 自学转行前端找到第一份前端工作,做得很吃力,被劝退怎么办?
  12. 航天信息a3连接不上服务器,航天信息睿财A3使用说明
  13. 全国计算机二级算国奖吗,如何区分竞赛证书的等级和含金量?(太多人傻傻分不清国奖、省奖、市奖)...
  14. java jsf 入门_JSF入门实战
  15. 百度统计工具是什么?百度统计工具有什么用呢?
  16. echarts 多组图例重叠问题
  17. rust开发环境_Rust开发环境搭建
  18. 大数据安全分析平台评估五要素
  19. 我国将投巨资开发网游 抵制进口垄断!
  20. 树莓派+PyQt制作魔镜

热门文章

  1. 将jar包部署在docker上,将jar包打成镜像,使用docker部署jar包
  2. 2022-2028年中国钢铁智能制造产业竞争现状及发展趋势分析报告
  3. 2022-2028年中国未硫化橡胶制品行业市场运行格局及未来前景展望报告
  4. xp系统蓝屏代码7b_电脑蓝屏重启不求人!学会这个方法,自己就能轻松解决!...
  5. 2022-2028年中国TAC薄膜行业市场全景评估及投资前景规划报告
  6. 【牛腩新闻发布系统】开发前的准备01
  7. pytorch利用多个GPU并行计算多gpu
  8. OpenMP用法大全
  9. java.lang.NullPointerException异常原因及解决
  10. 在NVIDIA A100 GPU中使用DALI和新的硬件JPEG解码器快速加载数据