`
- 浏览:
33890 次
- 性别:
- 来自:
weihai
-
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
- <head>
-
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>弹出提示</title>
- <style>
- * {margin:0;padding:0;font-size:12px;}
-
html,body {height:100%;width:100%;}
- #content {background:#FFFFFF;padding:30px;height:100%;}
- #content a {font-size:30px;color:#369;font-weight:700;}
- #alert {border:1px solid #369;width:300px;height:150px;background:#e2ecf5;z-index:1000;position:absolute;display:none;}
- #alert h4 {height:20px;background:#369;color:#fff;padding:5px 0 0 5px;}
- #alert h4 span {float:left;}
- #alert h4 span#close {margin-left:210px;font-weight:500;cursor:pointer;}
- #alert p {padding:12px 0 0 30px;}
- #alert p input {width:120px;margin-left:20px;}
- #alert p input.myinp {border:1px solid #ccc;height:16px;}
- #alert p input.sub {width:60px;margin-left:30px;}
- </style>
-
- </head>
-
- <body>
-
<div id="content">
-
<a href="#">注册</a>
- </div>
-
<div id="alert">
-
<h4><span>现在注册</span><span id="close">关闭</span></h4>
-
<p><label> 用户名</label><input type="text" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" /></p>
-
<p><label> 密 码</label><input type="password" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" /></p>
-
<p><input type="submit" value="注册" class="sub" /><input type="reset" value="重置" class="sub" /></p>
- </div>
-
<script type="text/javascript">
-
var myAlert = document.getElementById("alert");
-
var reg = document.getElementById("content").getElementsByTagName("a")[0];
-
var mClose = document.getElementById("close");
-
reg.onclick = function()
- {
-
myAlert.style.display = "block";
-
myAlert.style.position = "absolute";
-
myAlert.style.top = "50%";
-
myAlert.style.left = "50%";
-
myAlert.style.marginTop = "-75px";
-
myAlert.style.marginLeft = "-150px";
-
-
mybg = document.createElement("div");
-
mybg.setAttribute("id","mybg");
-
mybg.style.background = "#000";
-
mybg.style.width = "100%";
-
mybg.style.height = "100%";
-
mybg.style.position = "absolute";
-
mybg.style.top = "0";
-
mybg.style.left = "0";
-
mybg.style.zIndex = "500";
-
mybg.style.opacity = "0.3";
-
mybg.style.filter = "Alpha(opacity=30)";
- document.body.appendChild(mybg);
-
-
document.body.style.overflow = "hidden";
- }
-
-
mClose.onclick = function()
- {
-
myAlert.style.display = "none";
-
mybg.style.display = "none";
- }
- </script>
- </body>
- </html>
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
class=Select_Region_bj 我给了一个灰色半透明的背景样式,后来在Javascript中写onclick事件无论这么写,点击内容区也是会关闭掉遮罩层。我百思不得其解到底怎么样写才能点击内容区不会关闭遮罩
点击按钮弹出悬浮层,层上有数据且可以关闭 页面点击按钮后出现遮罩层,遮罩层上面有...所以选择弹出层,一层遮罩层,一层显示详情层,遮罩层的好处可以让用户在看详情的时候不能操作页面其他位置,防止页面出现错误。
漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div ...
遮罩层的图片
js 打开关闭遮罩层 loading图片
Bootstrap实现遮罩层 参考文档: http://blog.csdn.net/u014175572/article/details/51800168 Bootstrap实现遮罩层 参考文档: http://blog.csdn.net/u014175572/article/details/51800168 Bootstrap实现遮罩层 ...
在winform中实现的遮罩层效果
遮罩层 动画遮罩层 动画遮罩层 动画遮罩层 动画遮罩层 动画遮罩层 动画遮罩层 动画遮罩层 动画 动画遮罩层 动画 动画遮罩层 动画 动画遮罩层 动画 动画遮罩层 动画 动画遮罩层 动画
带图片的动态上传文件,js插件,带遮罩层
JS弹DIV,遮罩层JS弹DIV,遮罩层JS弹DIV,遮罩层
Android AlertDialog对话框 自定义实现遮罩层
js 遮罩层js 遮罩层js 遮罩层js 遮罩层js 遮罩层js 遮罩层js 遮罩层
带遮罩层的普通窗口 不带遮罩层 在调用页面关闭弹出的窗口 关闭窗口并刷新或跳转调用页面
点击弹出浮动层 弹出遮罩层 点击弹出浮动层 弹出遮罩层
asp.net中 jquery写的遮罩层,但是有点问题。有滚动条的时候,屏幕下面遮不到,所以就没上分。。尽供参考。。分享下
这是一款使用html5 svg和css3制作的全屏遮罩导航菜单,这些遮罩层没有固定的大小但是它们全屏覆盖整个屏幕,可以说大小是以你的浏览器为准。默认是绿色背景,你完全可以换成其它颜色,这个不用我细说了吧。 请在现代...
本文实例讲述了JS简单实现点击按钮或文字显示遮罩层的方法。分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <...
微信小程序全屏遮罩层代码。代码简洁,适合定制开发。
自定义半透明遮罩层
Javascript实现移动端点击按钮弹出遮罩层,自适应移动端屏幕大小。