关于弹出层的总结
来源:互联网 发布:好的哲学书籍推荐知乎 编辑:程序博客网 时间:2024/06/05 14:11
关于弹出层的我的做法:
例如:点击“修改”按钮,弹出弹出框,并将需要修改的信息附到弹出框中;
思路:
1. 点击修改按钮,弹出阴影遮罩,阴影遮罩的样式代码如下:
.mask{width: 100%;height: 100%;background: rgba(0,0,0,0.5);position: fixed;z-index: 100;display: none; }2.在阴影遮罩上弹出弹出框,让弹出框出现在浏览器窗口的中间位置,弹出框的css样式代码如下:
.upd_layer{position:fixed;width:800px; height:350px;background-color:#fff;left:50%;top:50%;margin-left:-400px;display:none;margin-top:-250px;z-index:111;overflow:auto;padding-top:10px; }3.弹出后发现阴影遮罩下的页面还可以鼠标进行滚动,在js代码中增加弹出时给body 设置“overflow:hidden”样式,解决此问题,js代码如下:
$(".mask").show(); $(".upd_layer").show(); $("body").css("overflow","hidden");
最后,发现在浏览器高度缩小时,弹出层的上部分可能被挡,可能影响小屏幕下的弹出效果,写了一段调整位置的函数解决此问题,js代码如下:
//随时调整弹出层的位置 function adjustTanchuPos() { $('.upd_layer').height($(window).height() * 0.5);$('.upd_layer').css('margin-top', $('.upd_layer').height() * -0.5); } adjustTanchuPos(); $(window).resize(adjustTanchuPos);这样,该弹出层在窗口大小变动时,利用了jQuery中的resize()方法会随时调整弹出层的位置。
完整的demo详见我的github: https://github.com/pluscai/tanchu_demo/blob/master/tanchu
1 0
- 关于弹出层的总结
- 关于弹出层的layer
- 关于jsp弹出层的带回值
- 关于弹出层定位的问题
- 关于弹出div层居中的问题及解决方法
- 关于弹出层(iframe)时刷新页面的js
- 关于弹出层(iframe)时刷新页面的js
- 关于弹出层或是窗口的几种方式
- 关于Div弹出层无法取值的解决方法
- jquery的弹出层
- 弹出层的CSS
- 弹出层/弹出对话框的使用
- 首页弹出一次的弹出层
- 移动端弹出层后一系列问题总结
- Javascript弹出层的效果
- jquery写的弹出层
- 可移动的弹出层
- 漂亮的弹出层效果
- 0001-数据库系统——(总述)
- Sparkstreaming中InputDStream的详解(源码)
- dropdownlist
- 拥有博客的第一天(心情文,非技术文)
- js实时监听输入框的值
- 关于弹出层的总结
- ExpandableList默认显示三条数据,点击更多显示全部(带上拉下拉)
- mysql修改字段名称
- ORACLE中 SEQUENCE自动增长 用法
- java项目加密,使用Proguard进行项目混淆加密
- 刷新页面及页面提示
- Java堆、栈和常量池以及相关String的详细讲解(经典中的经典)
- Razer随手
- Android Service跟线程及IntentService使用