js遮罩层以及移动端的上拉框

今天发一个之前写的移动端的项目，主要是讲一下遮罩层的应用，以及顺带提一下移动开发的一些事情。首先按钮点击弹出遮罩层这个大家很熟悉了，这里还是给大家提供一份代码，跟通用的没太大区别，主要讲一下方法：

$(function(){

var jiage=$(".jiage"),xingji=$(".xingji"),fj=$(".fj li"),qd=$(".qd");
jiage.click(function(){
tanchu();
xingji.slideDown(260);

});
function tanchu(){
var w=document.createElement("div");
w.setAttribute("id", "mybody"); //创建透明背景层(mybody)
with (w.style) {
width='100%';
height='100%'
position = 'absolute';
zIndex = '10';
left = '0';
top = '0';
background = '#000000';
filter = 'Alpha(opacity=50)';
opacity = '0.3';
}
document.body.appendChild(w);
}

fj.click(function(){
fj.css("background","#fff").css("box-shadow","0").css("color","#000");
$(this).css("background","#F4F4F4").css("box-shadow","0px 1px 0px #999 inset").css("color","#31A1A4");

});

//点击之后清楚遮罩层
qd.click(function(){
xingji.slideUp(300);
var m=$("#mybody");
m.remove();
});
});

遮罩层的代码没什么好说，jq的基本dom操作，当然，有需要的可以自取，也很容易看懂。另外值得一提的是遮罩层的弹窗都要注意销毁，而这里因为正好页面处有确定选项，所以通过点击确定之后清楚遮罩层。当然这里提一个在移动端如何做上拉框的做法。我用的是将上拉框先用绝对定位fixed，然后点击的时候下拉，因为本身jq的slideUp采取的就是将div由0变大，因此这样的做法便能实现我们想要的效果。附上图片：

这里想提一下，该项目是之前在小公司做的外包项目，初步只实现了效果，而用户体验事实上却是很差，浏览器采取和客户端一样的效果明显有很大缺陷，反应较慢。当然，从某种程度上，调试也是可以提升一部分效果的。

转载于:https://www.cnblogs.com/qianyongV/p/3972575.html

js遮罩层以及移动端的上拉框相关推荐

html全屏遮罩层,js遮罩层穿透怎么用JS弄遮罩层？全屏，有透明
也可直接点"搜索资料"搜索整个问题. 遮罩层 js 事件穿透搜索资料本地图片图片链接代码提交回答匿名回答自动保存中 html中的frameset,假如有上中下三个f ...
html怎么添加遮罩层,如何在浏览器窗口上添加一个遮罩层
背景在web2.0中,页面弹窗是一个很常见的交互方式,这样既可以避免不必要的页面跳转,也可以改进界面的布局和可交互性. 但是,浏览器原生的弹窗函数(alert, confirm, prompt)有着 ...
vue 移动端实现上拉加载更多
根据项目需求实现上拉加载更多-我用的是 vue-infinite-loading 插件实现的.下面是安装流程和使用方法:有需要直接拿去用第一步:安装 npm install vue-infinite ...
js实现省市区三级联动(三个下拉框实现)
js实现省市区三级联动(一个下拉框实现.页面可以多次引用) html代码: 您选择的是: <input type="text" value="" id=& ...
浮层java_通过遮罩层实现浮层DIV登录的js代码
摘要:这篇JavaScript栏目下的"通过遮罩层实现浮层DIV登录的js代码",介绍的技术点是"浮层DIV.JS代码.div.遮罩层.登录.代码",希望对大家 ...
Taro React组件使用（1） —— Overlay 遮罩层【渐入渐出动画遮罩层】
Overlay 遮罩层提供一个简单的 Overlay 遮罩层,在页面上的层级为 1026; 1. 使用指南在 Taro 文件中引入组件,将组件放入src下的components文件夹中 impor ...
解决uniapp map遮盖遮罩层
uniapp 层级高 app运行时遮罩层显示的时候 map在遮罩层上方 1.在需要弹出框的页面中配置pages.json {"path": "pages/con-te ...
使用Axure RP8 模拟遮罩层显隐
模拟遮罩层显隐实现思路拖入动态面板:命名为:主页动态面板:宽高设置为375*647(使用动态面板做基础,是因为内容超出部分会自动隐藏) 双击"主页动态面板",进入state1, ...
基于iSroll 5.0实现的上拉加载和下拉刷新插件
Updownload.js 基于iSroll 5.0实现的上拉加载和下拉刷新插件移动端效果比较好,开发者工具打开后,需要刷新下页面. [演示地址:] https://chenyk2016.githu ...

js遮罩层以及移动端的上拉框

js遮罩层以及移动端的上拉框相关推荐

最新文章

热门文章