`
- 浏览:
12424 次
- 性别:
- 来自:
上海
-
lytebox iframe 用法之 父层弹出图片
第一个页面，里面有个iframe调用另一个页面：注意红色的部分
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/lytebox.css" type="text/css" media="screen" />
</head>
<body>
图片测试
<iframe name="bodyNAME" scrolling="no" src="showSWF.jsp" frameborder="0" height="400" width="100%"></iframe>[/color]
</body>
</html>
第二个页面主要设置lytebox.js
<%@ page language="java" contentType="text/html; charset=gbk"
pageEncoding="gbk"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>横向的JS相册效果</title>
<script type="text/javascript" language="javascript" src="js/lytebox.js"></script>
</head>
<body>
<div id="tbody">
<a id="urlname" href="/kangaroo/view/unitimg/images/01.jpg" rel="lyteframe" rev="width: 400px; height: 300px; scrolling: no;">
<img src="/kangaroo/view/unitimg/images/01.jpg" width="590" height="280" id="mainphoto" />
</a>
</div>
</body>
</html>
分享到：
相关推荐
4. **初始化组件**：使用jQuery选择器找到弹出层元素，并调用插件提供的初始化方法。 5. **配置和使用**：根据需求设置弹出层的属性，如宽度、高度、iframe的URL等。然后通过调用插件的方法来打开、关闭或更新弹出层...
例如，使用`position: fixed`可以使弹出层始终位于屏幕中央，`z-index`属性用于确保弹出层位于其他元素之上。 3. **JavaScript/jQuery**：弹出层的动态行为（如打开、关闭、大小调整等）通常由JavaScript或jQuery...
这可能需要用到CSS的定位（positioning）和z-index属性来调整层叠顺序，让弹出框位于父页面内容之上，而遮罩层位于最顶层。 6. **易于使用**：由于描述中提到，所有代码都在子页面内部，这意味着用户只需要在子页面...
这里我们使用`.show()`和`.hide()`方法来控制弹出层的显示与隐藏，以及`.attr()`来动态设置iframe的`src`属性： ```javascript $(document).ready(function() { // 打开弹出层 function openPopup(url) { $("#...
7. `使用方法.txt`：这个文件详细说明了如何配置和使用弹出层iframe，包括如何引入必要的CSS和JS文件，如何调用函数来显示和隐藏弹出层等。 8. `懒人图库.txt`和`懒人图库.url`：这些文件可能指向一个图库资源，...
5. `img`：这是一个图片文件夹，通常包含弹出层中可能用到的各种图标和其他图像资源。 使用Layer插件时，开发者需要按照文档或示例代码来调用其API，例如创建弹出层、设置内容、关闭弹出层等。对于跨Iframe回调，...
在JavaScript编程中，有时我们可能需要自定义弹出层来替代浏览器原生的`alert`、`prompt`或`confirm`对话框，以提供更丰富的交互体验或者在特定场景下，比如在`iframe`中使用时，保持页面的可操作性。本主题将详细...
我们可以在Iframe内的脚本中使用`window.parent`调用父窗口的函数，传递需要弹出的数据，然后在父窗口中执行greybox的相关代码来打开模态窗口。 实现这一功能的关键步骤包括： 1. **设置通信通道**：在Iframe内部...
在网页开发中，"iframe弹出窗"是一种常见的技术手段，用于在不离开当前页面的情况下显示额外的内容或者功能。这种技术结合了`iframe`元素和自定义的对话框（dialog）设计，通常由`div`元素构建，并通过JavaScript...
在网页设计中，有时我们需要在父页面（外层页面）中通过`iframe`来嵌入子页面（内层页面），并实现子页面中的图片在父页面全屏展示。这个过程涉及到多个技术点，包括HTML、CSS以及JavaScript。下面将详细解释如何...
layer不仅支持基本的提示信息展示，还包括对话框、iframe、加载层、提示层等多种弹出形式，极大地丰富了网页的交互体验。 在**jQuery** 的基础上，layer提供了丰富的配置选项和回调函数，使得开发者可以自定义弹出...
可以使用`show()`和`hide()`方法，结合事件监听器来触发弹出层的显示和关闭。例如： ```javascript $(document).ready(function() { $("#open_popup").click(function() { $("#popup").show(); }); $("#...
《jQuery Colorbox弹出层插件：实现图片弹出显示的代码详解》 在Web开发中，为了提供更好的用户体验，我们常常需要实现一种效果：当用户点击某个元素时，图片或者其他内容以弹出层的形式展示出来。jQuery Colorbox...
总结一下，Layer弹出的iframe层在执行完毕后关闭当前弹出层的方法主要包括以下步骤： 1. 创建一个Layer弹出层，设置类型为2（iframe）并加载需要的页面。 2. 在iframe页面内，执行异步操作（如AJAX请求）。 3. 在...
jquery特效插件FancyBox弹出层支持多种方式弹出层如：图片弹出层、文字信息弹出层、flash弹出层、ajax弹出层、Iframe弹出层。 支持。 IE6 IE7 IE8及以上 Firefox
本文介绍了layer弹出子iframe层父子页面传值的实现方法，分享给大家，具体如下： 父页面获取子页面元素 格式： $("#iframeID").contents().find("#eleID") 示例代码： father.html <!DOCTYPE html> <...
总之，理解和掌握弹出窗口与iframe的使用，以及它们在不同浏览器中的表现和适配策略，是前端开发者必备的技能之一。在实际开发过程中，需要根据目标用户的浏览器环境，灵活运用各种技术和技巧，以确保最佳的用户体验...
在这个特定的项目中，我们关注的是如何使用JavaScript实现机票城市选择的功能，同时结合下拉层和弹出层的设计，并确保在不同浏览器以及iframe环境下都能正常工作。 首先，我们需要理解下拉层和弹出层的概念。下拉层...
标题“弹出层显示图片”涉及的技术点主要是利用JavaScript库jQuery和一个名为Fancybox的插件，来实现网页上图片的弹出式放大效果。这种效果常见于网站上的图片展示，用户点击缩略图后，图片会在当前页面以全屏或半屏...
这个"弹出层示例展示"显然是一个教学或演示如何实现弹出层的实例，特别提到了与`iframe`的父子关系，这意味着它可能涉及到了`iframe`嵌套以及与父页面的通信。 弹出层通常通过JavaScript、jQuery或其他前端库来创建...