js遮罩效果制作弹出注册界面效果

2024-10-24 16:03:48

本文实例为大家分享了js遮罩效果弹出界面的具体代码，供大家参考，具体内容如下

<head>
 <meta charset="UTF-8">
 <title>遮罩</title>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  #shade{
   position: fixed;
   width: 100%;
   height: 100%;
   display: none;
  }
  .shade-background{
   width: 100%;
   height: 100%;
   background-color: #CCCCCC;
   opacity: 0.5;
  }
  #register{
   position: relative;
   background-color: #fff;
   width: 500px;
   height: 300px;
   top: -70%;
   margin: 0 auto;
  }
 </style>
</head>
<body>
<div id="shade">
 <div class="shade-background"></div>
 <div id="register">
  用户名<input type="" name="" id="" value="" /><br />
  密 码<input type="" name="" id="" value="" /><br />
  <input type="submit" name="" id="reg" value="注册" />
 </div>
</div>
<div>
 <input type="button" name="" id="btn" value="弹出遮罩" />
</div>
</body>
<script>
 var shade = document.getElementById("shade");
 var btn = document.getElementById("btn");
 var reg = document.getElementById("reg");
 btn.onclick = function(){
  shade.style.display = "block"
 }
 reg.onclick = function(){
  shade.style.display = "none"
 }
</script>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)

js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 复制代码代码如下: <!doctype html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{}{margin:0;padding:0;} html{}{_background:url(about:blank);} /**//*
js制作带有遮罩弹出层实现登录注册表单特效代码分享

本文实例讲述了js制作带有遮罩弹出层实现登录注册表单代码特效代码.分享给大家供大家参考.具体如下: 运行效果图: ----------------------查看效果源码下载----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. jquery制作的带有遮罩弹出层实现登录注册等表单的特效源码,是一段实现了点击后在原始页面上弹出想用页面的代码. 为大家分享的js制作带有遮罩弹出层实现登录注册表单代码特效
js点击按钮实现带遮罩层的弹出视频效果

本文实例讲解了js点击按钮实现带遮罩层的弹出视频效果,涉及到css以及JavaScript,分享给大家供大家参考,具体内容如下最终显示效果:点击红色按钮,会有视屏弹出并带有遮罩层点击黄色区域可以关闭视频并回到最初的状态. 页面主要代码:main中主要包含一个a,控制显示的按钮.设置有id值. <div class="main"> <a href="javascript:;" class="video" id="
弹出最简单的模式化遮罩层的js代码

假设我们有一个容器container如下: 复制代码代码如下: <style type="text/css"> #container{width:auto;height:auto; overflow:hidden;} /*这里的overflow:hidden;属性主要是为了设置使超出container的部分自动隐藏,之所以设置这个属性,是为了解决ie8及以下版本浏览器兼容性问题*/ </style> <div id="container&quo
Js制作简单弹出层DIV在页面居中中间显示遮罩的具体方法

这两天要用到正好练练手,比想象中碰到的问题要多,比如: ie6背景透明 ie6居中显示还有对js对象的理解 openID=显示按钮,conID=需要显示的div,closeID=关闭按钮解决了: 1.可以遮挡ie6下的select元素但是在ie6下div没有透明度 2.弹出的div可以一直在浏览器屏幕中间显示问题: 1.目前不支持.class 只支持#id 2.需要显示的div需要自己设置css 3.在ie6下需要设置css 例如div {_position: absolute;_top
html 锁定页面(js遮罩层弹出div效果)

复制代码代码如下: <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>UntitledDocument</title> <script> function createIf
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法

本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操作指定的内容,例如可以弹出一个登陆框之类的内容,下面就介绍一下如何实现此种效果,代码实例如下: 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8">
js实现遮罩层弹出框的方法

本文实例讲述了js实现遮罩层弹出框的方法.分享给大家供大家参考.具体分析如下: 昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了请指出啊: 复制代码代码如下: <style> #H-dialog{display:none;position:absolute;z-index: 9999999;width:400px;height: auto; background-color: #f
利用js实现遮罩以及弹出可移动登录窗口

复制代码代码如下: <!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> <title></titl
js弹出div并显示遮罩层

复制代码代码如下: //--------------------弹出层------------------- //popDivId:弹出层div的ID //dragDivId:用于拖动div的ID //isShowMask:是否显示遮罩层 function popDivShow(popDivId, dragDivId, isShowMask) { if (isShowMask) { creatMask(popDivId); } var oWins = document.getElementBy

js遮罩效果制作弹出注册界面效果

相关推荐

随机推荐