js遮罩效果制作弹出注册界面效果
更新时间：2017年01月25日 11:40:49 作者：万花果子
这篇文章主要为大家详细介绍了js遮罩效果制作弹出注册界面效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了微信小程序转化为uni-app项目的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了JS Canvas接口和动画效果大全，对Canvas感兴趣的同学，可以参考下2021-04-04
dtree 网页树状菜单及传递对象集合到js内，动态生成节点
最近要做一个联系人的选择框，选择联系人后，将联系人的手机号添加到网页的输入框，可以支持复选框2012-04-04
这篇文章主要介绍了JS中的进制转换以及作用的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
这篇文章主要介绍了微信小程序实现watch监听，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要介绍了使用son_encode 给前端返回数据，结果顺序不对，经debug调试，发现是json_encode 函数的问题,变成 " " + 数字即可,需要的朋友可以参考下2020-03-03
这篇文章主要为大家详细介绍了nodejs与javascript中aes加密的相关资料，感兴趣的朋友可以参考一下2016-05-05
近几天在做百度地图时,需要转换时间格式并做显示,下面这篇文章主要给大家介绍了关于js中各种时间格式的转换方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
下面小编就为大家带来一篇js原生跨域_用script标签的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
本文主要介绍了JavaScript展开运算符和剩余运算符的区别详解，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
最新评论