Jquery mobile中如何实现遮罩效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery mobile中如何实现遮罩效果相关的知识，希望对你有一定的参考价值。
请问jquery mobile中怎么实现遮罩效果啊，我现在的情况是虽然实现了遮罩效果，但是添加进入的div没有Jquery mobile中的页面加强效果了？初学Jquery mobile 求解答
1 背景半透明遮罩层样式
需要一个黑色（当然也可以其他）背景，且须设置为绝对定位，以下是项目中用到的css样式：
2 jQuery实现遮罩
3 提示框
遮罩的目的无非让人无法操作内容，突出提示框，而提示框可参考上面的制作，z-index比遮罩层更高便可。主要问题是，如何控制提示框在浏览器居中。
简单的用jQuery做遮罩效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>用jquery做遮罩</title>
<style>
.all{
width:100%;
height:500px;
background: red;
position: relative;
}
.mask {
width:100%;
height:500px;
position: absolute;
display: none;
background:rgba(0,0,0,.5);
z-index:1000;
}
</style>
</head>
<body>
<div class="all">
<div id="mask" class="mask"></div>
</div>
</body>
<script src="jquery-1.11.3.min.js"></script>
<script>
(function(){
$(function(){
$(".all").click(function () {
$("#mask").slideToggle(1000);
});
});
})()
</script>
</html>
jQuery的代码一点点，是不是简单啊！！！哈哈哈
以上是关于Jquery mobile中如何实现遮罩效果的主要内容，如果未能解决你的问题，请参考以下文章
JQuery Mobile 1.4 如何在移动设备上禁用悬停效果