<!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>
smhx
- 浏览: 77259 次
- 性别:
- 来自: 昆明
-
最新评论
-
huhuanqadn：
你这个内部获得jndi数据源是什么意思，was ce可以配置j ...
在websphere portlet factory内部获得JNDI数据源 -
cjq71012：
谢谢楼主！！！思路知道了。
那个展示模板中增加jsp定制元素是 ...
定制IBM WCM 实现内容的查看次数记录 -
pangbuddy：
新的SEAM对很多配置也简化了。
Seam 2.1.1.GA 发布了 -
cyberblue：
感觉Seam的EJB引用并不比Spring的注入难用。
Seam 2.1.1.GA 发布了 -
cnpollux：
herowzz 写道xuyao 写道不错，以后就是就是spri ...
Seam 2.1.1.GA 发布了
自己写的在jquery mobile当前页弹出层
相关推荐
1. 单击放大：用户点击图片后，图片会在原位置以弹出层的形式放大显示，提供更好的查看细节。 2. 双击放大：用户双击图片时，图片在当前视窗内放大，通常会平移以保持图片中心可见。 3. 滑动手势放大：用户可以通过...
在Layer中，iframe弹出层常用于打开新的页面内容，而无需离开当前页面。以下是关于如何使用Layer组件进行多个iframe弹出层的打开、关闭以及参数传递的详细说明： 1. **打开iframe弹出层**： - **示例一**：通过...
1.12 强制在弹出窗口中打开链接 1.13 平滑滚动页面到某个锚点 1.14 阻止文本行换行 1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 ...
5. **JavaScript/jQuery**：可能包含JavaScript库，如jQuery，用于增强用户交互，如滑动效果、弹出窗口、下拉菜单等，提升网站的用户体验。 6. **Glow效果**：压缩包中提到的ft5_48_glow可能是模板中的一个特定元素...
在移动端，使用轻量级的库如jQuery Mobile或Vanilla JS可以优化性能，确保在各种设备上的流畅运行。 总的来说，这个压缩包提供了一套完整的移动优先的网站解决方案，包含了构建现代、互动性强、自适应的网页所需的...
layer是一款流行的JavaScript弹层组件，它提供了多种类型的弹出层，包括对话框、提示、加载层等，而iframe弹窗是其中一种，用于加载独立的网页内容。 通常情况下，当我们需要在弹窗中展示或编辑数据时，会面临如何...