移动端点击出现遮罩块效果

我们会用到一点点的js，就是它的点击函数

<script>var hide=document.getElementById('hide');var Click=document.getElementById('Click');var hideClose=document.getElementById('hideClose');Click.onclick=function (){hide.style.display='block';}hideClose.onclick=function (){hide.style.display='none';}</script>

首先在主页上肯定要有一个可点击的地方，我们获取它作为我们触发事件的按钮
用js获取到这个按钮
我们再做一个遮罩层，采用固定定位，为整个屏幕的大小，背景透明灰色的。
用js获取到这个遮罩层，同时我们也要在遮罩层留一个关闭的地方，好触发关闭也要用js获取到
var hide=document.getElementById(‘hide’);
var Click=document.getElementById(‘Click’);
var hideClose=document.getElementById(‘hideClose’);
获取到之后我们先实现把它显示
Click是我们主页上的按钮，当点击的时候，会将遮罩层的display属性值改为block，此时就显示了
Click.οnclick=function (){
hide.style.display=‘block’;
}
当我们再去点击遮罩层上关闭按钮式，就会将遮罩层的display值改为none，就达到了隐藏的效果了。
hideClose.οnclick=function (){
hide.style.display=‘none’;
}

移动端点击出现遮罩块效果相关推荐

html5 翻牌效果,HTML5实现移动端点击翻牌功能
效果一个大小的两个面,在同一位置上正面的Y轴旋转为0度背面的Y轴旋转180度隐藏被旋转的 div 元素的背面(backface-visibility) 点击的时候同时改变正面和背面的旋转角度, ...
html取消图片选中效果,web前端：取消a标签在移动端点击时的背景颜色
背景(background)属性定义元素的背景效果元素的背景区包括前景之下直到边框边界的所有空间.因此,内容框与内边距都是元素背景的一部分,且边框画在背景上.css允许应用纯色作为背景,也允许使用背景 ...
js ajax 点击遮罩层,jQuery弹出遮罩层效果完整示例
本文实例讲述了jQuery弹出遮罩层效果.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition ...
移动端点击延迟300ms传说你听过吗
「 H5开发引发问题」上篇文章刚说了不要把公司当成家,然后这周我就差点把公司当家了,每天回去很晚,总之加班了. 然后在做项目的过程中,发现了一个由来已久的传说, 300ms延迟问题,可能很多同学 ...
html遮罩层动画制作,flash简单制作遮罩动画效果
flash简单制作遮罩动画效果QQ空间的开机动画大家应该都有,从最初的出现的一点到后面全部出现,如此神奇的效果到底是怎么做的呢,一起来看看吧!遮罩特效: 由于百度只能上传500k以内的照片,所以效果图 ...
JQuery实现点击缩略图查看大图效果
点击缩略图查看大图效果,这里存在一个如何获取图片真实大小的问题.在手机端页面,插入的图片大小都是按照图片的原始尺寸在展示的,如果图片太大完全超出手机的屏幕尺寸 ,我们的bootstrap响应式针对图片 ...
移动端点击加qq好友和加入qq群
移动端点击加qq好友和加入qq群写这篇文章主要是在做加qq好友和加入qq群功能时,在移动端ios上遇到了一些问题. 使用qq官方的api,在ios上加qq好友时会跳到app store,不会跳转到q ...
前端点击按钮打印Excel
前端点击按钮打印Excel 实现思路太长不看版后端spire.xls将excel转为html,前端打印iframe 具体说明前端只能打印html文档已有的dom节点,无法直接打印Excel,那么 ...
css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display：none；的区别、遮罩层效果、三级菜单制作、选项卡制作——css3知识点总结
目录 css3新增选择器兄弟选择器属性选择器伪类选择器其他伪类选择器类元素选择器直接选择器否定选择器伪元素 :after清除浮动 :before和:after 用来写小三角形首字母 ...

移动端点击出现遮罩块效果

我们会用到一点点的js，就是它的点击函数

移动端点击出现遮罩块效果相关推荐

最新文章

热门文章