自己写的在jquery mobile当前页弹出层
海欣海夜 2015-08-27
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<title></title>
<link rel="stylesheet"
href="css/themes/default/jquery.mobile-1.4.5.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
<!--
function test() {
showMask();
var a = $("<div class='c-mask-conent' > </div>").css({
"height" : $(window).height() * 0.95,
"top" : $(document).scrollTop() + $(window).height() * 0.02
});
$.mobile.activePage.children(":eq(0)").before(a);
a
.html("<div><a href='#' class='ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a' onclick='closeIt();'>Cancel</a></div><div></div>");
var s = "<pre>1111内容<br>内容<br>内容<bghtr>内容<br>内容<br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br> <br><br></pre><a href='#' onclick='closeIt();'> aaaa</a>";
$("div:eq(1)", a)
.css("height", a.height() - $("div:eq(0)", a).height()).html(s);
}
function setScrollActive(active) {
if (active) {
$(document).unbind("scroll", disableScroll);
} else {
$(document).bind("scroll", {
"top" : $(document).scrollTop()
}, disableScroll);
}
}
function disableScroll(e) {
$(document).scrollTop(e.data.top);
}
function showMask() {
if ($(".c-mask", $.mobile.activePage).length == 0) {
$.mobile.activePage.children(":eq(0)").before(
"<div class='c-mask'> </div>");
}
$(".c-mask", $.mobile.activePage).show();
setScrollActive(false);
}
function hideMask() {
$(".c-mask", $.mobile.activePage).hide();
setScrollActive(true);
}
function closeIt() {
$(".c-mask-conent", $.mobile.activePage).hide();
hideMask();
}
//-->
</script>
<style type="text/css">
div p {
word-wrap: break-word !important;
white-space: normal !important;
}
.c-mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: lightgray;
display: none;
z-index: 10001;
opacity: 0.5
}
.c-mask-conent {
position: absolute;
left: 5%;
width: 90%;
z-index: 10002;
background: lightblue;
left: 5%;
overflow: auto
}
.c-mask-conent>div:first-child {
height: auto;
text-align: right;
background: lightgray;
}
.c-mask-conent>div:last-child {
background:;
overflow: auto
}
</style>
