<!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
- 浏览: 76380 次
- 性别:
- 来自: 昆明
-
最新评论
-
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当前页弹出层
相关推荐
在IT领域，尤其是在Web开发中，"jquery弹出层不关闭 父页面刷新"是一个常见的交互需求。这里，我们主要讨论如何使用jQuery实现这样的功能，即在一个弹出层（通常是一个模态对话框）显示时，用户可以操作父页面而不会...
在网页设计中，弹出层通常用于显示警告信息、用户登录表单、确认对话框或其他需要在当前页面之上显示的内容，而不会中断用户的浏览体验。这种效果可以通过添加额外的CSS样式和JavaScript代码来实现。 描述中的...
在没有这些属性的情况下，我们需要手动将必要的CSS代码内联或者引入到当前页面，以确保弹出层的正确显示和功能。 在文件列表中，我们看到`layer.html`可能是包含弹出层示例的HTML文件，`_notes`可能是开发者笔记或...
标题“jquery弹出层”暗示我们将会探讨的是如何使用jQuery来实现网页上的弹出层效果，这在网页设计中是非常常见的一种功能，用于显示警告、信息、确认对话框或者复杂的模态窗口。 首先，让我们理解什么是弹出层。弹...
在网页设计中，弹出层是一种常见的交互方式，用于在不离开当前页面的情况下展示额外的信息或功能。jQuery作为一款强大的JavaScript库，提供了丰富的API和插件，使得实现弹出层效果变得简单易行。本文将深入探讨...
7. **优化移动端体验**：为了适应手机屏幕，确保弹出层和时间选择器的布局是响应式的，可能需要使用媒体查询(`media queries`)和`jQuery`的`.resize()`方法来调整大小和位置。 以上就是一个基本的jQuery手机端点击...
jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难，只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如：我想要这里是弹出浮动遮罩层</div> 并随页面...
标题中的“自己写的jquery 弹出层插件,可拖动”表明这是一个基于jQuery的自定义弹出框插件，具备拖动功能。在Web开发中，弹出层（也称为对话框或模态窗口）常用于显示警告、确认信息或者提供用户交互界面。这个插件...
在这款弹出层插件中，jQuery的简便语法使得弹出层的创建和控制变得非常简单。 三、CSS3特性 CSS3是CSS的最新版本，引入了许多新的样式和动画功能。此插件充分利用了CSS3的过渡、动画和3D变换，实现了平滑流畅的弹出...
弹出层是一种常见的UI设计元素，它能在不离开当前页面的情况下显示额外内容。在网页或移动应用中，弹出层常用于提示消息、表单提交、图片预览等场景。这款jQuery弹出层插件提供了一种高效且自定义程度高的解决方案，...
**jQuery弹出层详解** 在Web开发中，弹出层是一种常见的交互元素，用于显示临时信息、用户对话或进行操作确认。本篇文章将深入探讨如何使用jQuery实现弹出层功能，以及相关源码分析和应用工具。 首先，jQuery库...
JQuery 弹出层始终显示在屏幕正中间 在 Web 开发中，弹出层是常见的交互效果，通常用于提示信息、确认操作或显示详细信息。本文将详细介绍如何使用 JQuery 实现弹出层始终显示在屏幕正中间。 首先，需要定义弹出层...
jQuery Zoom图片弹出层插件是一种广泛应用于网页设计中的JavaScript库，它允许用户在点击缩略图时，以放大效果展示全尺寸图片，为用户提供更好的视觉体验。这种插件尤其适用于创建图片相册或者产品展示页面，使得...
通过学习这个项目，开发者可以了解如何使用jQuery选择器、事件处理、DOM操作等基本概念来创建弹出层，并且能够根据自己的需求调整和扩展代码。 “jquery”标签表明这个项目的核心技术是jQuery，它简化了JavaScript...
在网页设计中，"jQuery弹出层"是一种常见的交互元素，用于向用户显示额外的信息、提示或者表单等。标题中的“jquery弹出层鼠标点击弹出层可浮动在屏幕滚动”指的是使用jQuery实现的弹出层功能，当用户点击文字或图片...
《jQuery弹出层特效：打造超炫用户体验》 在网页设计和开发中，弹出层是一种常见的交互元素，用于展示信息、提示用户或进行交互操作。jQuery作为一个强大的JavaScript库，为实现这种效果提供了丰富的功能和便利。本...
在Web开发中，弹出层（Modal）是一种常用的交互元素，它能够在用户不离开当前页面的情况下显示额外的信息或功能。jQuery库以其强大的DOM操作和事件处理能力，为创建弹出层特效提供了丰富的可能性。本主题将详细介绍...
在"jQuery顶部浮动弹出层动画弹出层特效"这个主题中，我们将深入探讨如何利用jQuery来创建动态、吸引人的弹出层效果，特别是在页面顶部浮动的设计。 首先，让我们了解什么是弹出层。弹出层是一种网页设计技术，它...
在网页设计和开发中，交互性和用户体验是至关重要的因素，其中弹出层和遮罩层是常见的增强用户体验的工具。本文将深入探讨“简单实用的jQuery可拖动弹出层，遮罩层”这一主题，旨在帮助开发者了解如何利用jQuery实现...
**jQuery弹出层插件详解** 在Web开发中，弹出层（Popup）是一种常见的交互设计元素，用于显示额外的信息、对话框或者进行特定操作。jQuery作为一款强大的JavaScript库，提供了丰富的插件来实现弹出层功能。本文将...