JS+CSS点击弹出登陆框代码
<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点击弹出登陆框代码相关推荐
- 基于jQuery鼠标点击弹出登陆框效果
基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <input type=&quo ...
- html悬浮弹窗后面背景变深,JS+CSS实现Div弹出窗口同时背景变暗的方法
本文实例讲述了JS+CSS实现Div弹出窗口同时背景变暗的方法.分享给大家供大家参考.具体实现方法如下: 代码如下: JS+CSS实现的Div弹出窗口,同时背景变暗 function locki ...
- outlook显示服务器错误,Outlook,弹出登陆框,无法登陆 服务器错误0x800CCC90 错误号:0...
0 摘要:客户端症状: 一直弹出登陆框,填写正确ID及密码确认后依然如此.点取消,然后接收邮件会提示以下信息: 无法使用安全密码身份验证登陆到服务器.......服务器响应:-ERR bad comm ...
- JS的三种弹出提示框(alert、confirm、prompt)
三种弹出提示框 1.alert() 2.confirm() 3.prompt() 1.alert() 方法会弹出一个警告框,只有确定按钮 alert('这是个警告框') 2.comfim() 会弹出一 ...
- js+jquery手写弹出提示框
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 百度地图android弹出窗口,【代码】Android百度地图点击弹出信息框
分享给大家一篇技术文章,还有很多不足之处,欢迎吐槽!期待各位android爱好者,加入android交流群:278744577,加群请验证:qy88,共同探讨! 如图: 我是在百度的demo上改的主要 ...
- JS关闭浏览器 (不弹出提示框)
如果网页不是通过脚本程序打开的(window.open()),调用window.close()脚本关闭窗口前,必须先将window.opener对象置为null,否则浏览器(IE7.IE8)会弹出一个 ...
- 冒险岛2官网模拟之三单击登录弹出登陆框的具体实现(连载)
登录框的设计的样式以及结构思路 在样式中需要设置登录的unlogin盒子,以及登录框login-web盒子,最后写一个全局的cover-bg来做遮罩层.但是设置样式的时候将cover-bg设置为定位这 ...
- html点击弹出文本框,html制作,点击文字超链接显示文本框,再点击文字超链接隐藏文本框...
window.οnlοad=function(){ document.getElementById('click').οnclick=function(){ if (document.getEleme ...
最新文章
- java interface class_Java中常量定义在interface和class的区别(转)
- JAVA基础代码分享--学生成绩管理
- 盘点区块链的2018:技术与工具演进篇
- c语言键盘控制数码管显示,3*4矩阵键盘控制4位数码管显示的C程序
- rtsp,rtp,gb28181直接转化为html5播放(二)
- linux下qt生成dll,Qt 创建和使用动态链接库 - cibiren2011的专栏
- 博客频道 - CSDN.NET...
- MAC常用java开发软件
- 服务器没有网卡驱动怎么看网卡型号,[怎么看网卡设备]怎么查看网卡驱动
- 「镁客·请讲」艾拉比芮亚楠:当OTA普及,我们将在物联网和车联网看到三个变化...
- PyG MessagePassing机制源码分析
- 自学转行前端找到第一份前端工作,做得很吃力,被劝退怎么办?
- 航天信息a3连接不上服务器,航天信息睿财A3使用说明
- 全国计算机二级算国奖吗,如何区分竞赛证书的等级和含金量?(太多人傻傻分不清国奖、省奖、市奖)...
- java jsf 入门_JSF入门实战
- 百度统计工具是什么?百度统计工具有什么用呢?
- echarts 多组图例重叠问题
- rust开发环境_Rust开发环境搭建
- 大数据安全分析平台评估五要素
- 我国将投巨资开发网游 抵制进口垄断!
- 树莓派+PyQt制作魔镜
热门文章
- 将jar包部署在docker上,将jar包打成镜像,使用docker部署jar包
- 2022-2028年中国钢铁智能制造产业竞争现状及发展趋势分析报告
- 2022-2028年中国未硫化橡胶制品行业市场运行格局及未来前景展望报告
- xp系统蓝屏代码7b_电脑蓝屏重启不求人!学会这个方法,自己就能轻松解决!...
- 2022-2028年中国TAC薄膜行业市场全景评估及投资前景规划报告
- 【牛腩新闻发布系统】开发前的准备01
- pytorch利用多个GPU并行计算多gpu
- OpenMP用法大全
- java.lang.NullPointerException异常原因及解决
- 在NVIDIA A100 GPU中使用DALI和新的硬件JPEG解码器快速加载数据