WebApp个人技巧2

首页 > 娱乐前沿 > 热点

WebApp个人技巧2

2015-12-24 22:45:37 | 来源：新浪微博 | 投稿：墨默的猫 | 编辑：小柯

原标题：WebApp个人技巧2

上次的长微博写完之后又遇到了许多问题，就把遇到的新问题整理下来记录下去，希望自己以后也能一直坚持下去，废话不多说，上代码。

1.其实现在很多框架是自带模态窗口的，但是调用起来可能会出现z-index浮层顺序的问题，直接更改源码也不太好，今天看群里恰好就有人遇到了这个问题，因此我也在这里讲一下怎样自己写个模态窗口，比较靠谱。

这个是我写出的项目中的一个例子，关于这个兼容性好一点的模态窗口确实也不是很好写，设计中间有很多BUG好在最后都一一解决了。

我在界面的右下角用定位固定了一个div按钮，添加触摸事件（手机端最好是写触摸事件，因为大部分单击事件不会被激活），界面上生成一个透明的模态窗口，其实就是个div。

对了，这里插一嘴背景透明但空间不透明的方法，就是背景单独提出一个div，而不透明的控件与其不存在嵌套关系，其实想想还是挺简单的。

我的代码如下：

.ovfHiden{overflow:hidden;height:100%;}

varphmenu=false;

if(document.body.clientWidth<=720){

$("#showMenu").click(function(event){

if(phmenu==false){

$("header#top-menuul").slideDown(500);

$("#mod").css('display','block');

$(".navListBox").css('display','none');

$("#showMenuimg").fadeOut(500);

document.body.style.overflow='hidden';

$('html,body').addClass('ovfHiden');

phmenu=true;

}else{

$("header#top-menuul").slideUp(500);

$("#showMenuimg").fadeIn(500);

setTimeout(function(){

$("#mod").css('display','none');

$(".navListBox").css('display','block');

},500);

document.body.style.overflow='inherit';

$('html,body').removeClass('ovfHiden');

phmenu=false;

}

});

}

变量是用来判断模态窗口是否在打开，自写的浮动就很好控制z-index属性了，但其实还有个问题就是光是div还会有滚动条，有些手机横过来后100vh会出问题，后来我高度直接定成2000px，添加了document.body.style.overflow='hidden';来隐藏滚动条，但是问题又出现了，就是真正在手机上测试依旧可以滑动，并且在电脑上按上下键也依旧可以滚动，搜了很多方法，最后就是像上面代码，给body添加了class才解决，大概原理就是body固定了，超出的容器和node全都隐藏，因此不存在可以滚动的情况了。

1.其实对于js的动画来说现在市面上最缺少的还是css方面的动画。其实这点还是希望以后四海能在前端的css方面下下功夫，教教学生这方面以后发展潜力还是很大的，并且css的动画比js的效果方便很多。有兴趣学习的朋友可以搜索下相应的教学，虽然不多。

2.再说个小细节就是框架要及时更新，前一阵因为框架的BUG忙了好久，最后发现是框架问题，跳转不加载css和js，更新后问题解决了。。因此最好不要图方便用别人上传的插件，官网是最靠谱的。

赏

tags：

相关：

付费探讨

探讨下明天会怎幺走出周五的路线，月底是否会收在3520之上。目前派别挺多的，基本上是过年发红包派，和基本

送给有野心的大学生，几万集名校公开课预告片免费分享

有来自北京大学、清华大学、上海交大……国内名校几万集免费预告片教程。居然还有这幺好的东西，之前一直把电

疯牛说股：目前市场如何操作

目前市场如何操作文/疯牛说股周四市场受到周三尾盘大幅杀跌的影响，两市双双低开，早盘市场在低开后再板块

先辈们诗词中的古丰八景