遮罩层 | 易学教程

div实现遮罩层效果( div弹出层,后面变色不可编辑转)

阅读更多关于 div实现遮罩层效果( div弹出层,后面变色不可编辑转)

转自： http://forlab.iteye.com/blog/1767843 <! 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 > Jquery遮罩层 </ title > < style type ="text/css" > #BgDiv { background-color : #e3e3e3 ; position : absolute ; z-index : 99 ; left : 0 ; top : 0 ; display : none ; width : 100% ; height : 100% ; opacity : 0.5 ; filter : alpha(opacity=50) ; -moz-opacity : 0.5 ; } #DialogDiv { position : absolute ;

CSS遮罩层

阅读更多关于 CSS遮罩层

<!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>Jquery遮罩层</title> <style type="text/css"> #BgDiv{background-color:#e3e3e3; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:100%;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;} #DialogDiv{position:absolute;width:400px; left:50%; top:50%; margin-left:-200px; height:auto; z-index:100;background-color:#fff;

小程序遮罩层

阅读更多关于小程序遮罩层

现在有一个需求，要求用户点击邀请按钮时能弹出一个遮罩层，使用户只能在遮罩层内操作，当用户点击取消按钮或者遮罩层内空白处的时候遮罩层就会消失，刚开始想复杂了，同事点拨一下之后发现其实并不难实现，很简单的一个功能，现将代码贴出 wxml 邀请按钮 <view class="myOrderItemCysc" style='background-color:unset;'> <button bindtap='chooseShare' style='width:100%;height:100%;margin:0;'> 邀请好友成为团长 </button> </view> 遮罩层 <view bindtap='chooseShare' hidden='{{hideShare}}' style='position:fixed;top:0;bottom:0;right:0;left:0;background-color:#333333d1;'> <button bindtap='onShareAppMessage' style='display:flex;align-items:flex-end;align-content:center;'>发送给微信好友</button> <buttonstyle='display:flex;align-items:flex-end;align-content

移动端开发——移动端遮罩层滚动防穿透body解决方案

阅读更多关于移动端开发——移动端遮罩层滚动防穿透body解决方案

经常做移动端网页开发的朋友们，都应该会遇到，弹起遮罩层的交互需求，比如小点的toast提示框，modal对话框，也有满屏的提示框，或者可操作交互的弹框；有些需求是要求在弹框上可操作，可滚动；在滚动时，就会遇到比较奇怪的兼容bug了，当你在滑动遮罩层时，下面的body页面也会跟着滚动，页面发生了“穿透”，即便你对弹出的元素设置最高级别的z-index，没什么用；对这个坑也是研究了一端是时间，才搞定，下面给他家分享一个实测非常有用的解决方案：大致思路，就是弹框出现时，给body设置禁止滚动（overflow:hidden）；弹框消失时，再回复该属性；直接贴代码（主要就是CSS+JS），使用方式很简单（代码可直接复制使用）， 1、先命名一个css样式属性： body.modal-open { position: fixed; width: 100%; } 2、js创建一个命名空间，用来动态给body绑定第一步设定的属性； var ModalHelper = (function (bodyCls) { var scrollTop; return { afterOpen: function () {//弹框弹出时 scrollTop = document.scrollingElement.scrollTop; document.body.classList.add(bodyCls);