效果图:
需求:点击‘查看街景’按钮,创建一个模态对话框,对话框中显示街景的flash。
使用JavaScript的内置对象window的showModalDialog方法实现
这是在是个简单的方法。参考showModalDialog的使用手册就知道怎么实现,实现代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="javascript" type="text/javascript">
function opendialog(url)
{
window.showModalDialog(url,
"","dialogWidth=400px;dialogHeight=300px;center=yes;help=no;resizable=1;status=no;scroll=no");
}
</script>
</head>
<body>
<button onclick="opendialog('http://sh.lvyou.city8.com/player.aspx?variety=tp_1-id_10007-scence_');">查看街景</button>
</body>
</html>
运行效果如下:
使用基于jQuery的colorbox库实现
功能实现了,样式不够完美,这里可以使用colorbox来实现。具体使用方法可以参考:http://www.jacklmoore.com/colorbox
(可以从colorbox的主页下载“View Demos”,本例中的css和image都来自该示例)。
实现代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<link rel="stylesheet" href="colorbox.css" />
<script src="../colorbox/jquery-1.6.2.min.js"></script>
<script src="../colorbox/jquery.colorbox.js"></script>
<script>
function show(url,name) {
$.colorbox({href:url,contentWidth:"400px", contentHeight:"300px",title:name});
}
</script>
</head>
<body>
<p><a href="#"onclick="show('iframe.html','枫桥古径');">查看街景</a></p>
</body>
</html>
<!-- iframe.html页面代码-->
<iframe src="http://sh.lvyou.city8.com/player.aspx?variety=tp_1-id_10007-scence_"
width="400px" height="300px;"></iframe>
这里需要注意的是:之所以在iframe.html中嵌套iframe标签,是因为colorbox采用ajax模式加载文件,而ajax的方式不能载入其他域名下的文件。由于浏览器的限制,ajax方式必须载入与其在同一域名下的文件。并且ajax需要有服务器支持。如果不是采用iframe的方式程序会报告:“This content failed to load.”
在使用struts2进行服务器开发的时候,可以修改代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<link rel="stylesheet" href="colorbox.css" />
<script src="../colorbox/jquery-1.6.2.min.js"></script>
<script src="../colorbox/jquery.colorbox.js"></script>
<script>
function show(url,name) {
//访问服务器端的action来取得对应的JSP(传入街景的url参数)
$.colorbox({href:"streetscape.action?streetscapeUrl="+url,contentWidth:"400px", contentHeight:"300px",title:name});
}
</script>
</head>
<body>
<p><a href="#"onclick="show('http://sh.lvyou.city8.com/player.aspx?variety=tp_1-id_10007-scence_','枫桥古径');">查看街景</a></p>
</body>
</html>
<!-- iframe.jsp页面代码-->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<iframe src="${streetscapeUrl}" width="750px" height="450px;"></iframe>
效果如下:
附:showModalDialog和showModelessDialog的使用详解
基本介绍:
showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。
window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。
使用方法:
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
参数说明:
sURL--
必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
vArguments--
可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures--
可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
1.dialogHeight :对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
2.dialogWidth: 对话框宽度。
3.dialogLeft: 离屏幕左的距离。
4.dialogTop: 离屏幕上的距离。
5.center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。
6.help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。
7.resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。
8.status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
9.scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。
下面几个属性是用在HTA中的,在一般的网页中一般不使用。
10.dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。
11.edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。
12.unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。
参数传递:
1.要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:
-------------------------------
parent.htm
<script>
var obj = new Object();
obj.name="51js";
window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");
</script>
modal.htm
<script>
var obj = window.dialogArguments
alert("您传递的参数为:" + obj.name)
</script>
-------------------------------
2.可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如:
------------------------------
parent.htm
<script>
str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");
alert(str);
</script>
modal.htm
<script>
window.returnValue="http://www.51js.com";
</script>
用window.showModalDialog 或者window.showModelessDialog打开一个模式窗口后,和父窗口的一些交互问题。
要进行交互操作的前提,在调用showModalDialog或者showModelessDialog方法的时候,第二个参数传window,如:
window.showModelessDialog('filename.htm',window,'dialogWidth=200px;dialogHeight=250px;')
接下来,就是取得父窗口的一些数据和方法,这是经常会用的,父窗口取子窗口的参数一般通过returnValue就可以搞定了
//取得父窗口的JS变量 var
window.dialogArguments.var;
//获得父窗口的对象和属性
window.dialogArguments.form1.name.value ;
//调用父窗口的方法 fun
分享到:
相关推荐
### JavaScript弹出对话框知识点详解 #### 一、`window.open()` 方法 ...以上就是关于JavaScript弹出对话框的总结,涵盖了基本的弹出窗口方法、内置对话框、模态与非模态对话框以及与父窗口通信的相关知识点。
在站点1(系统1的访问页面)中,我们可以通过以下代码弹出一个模态对话框: ```javascript function onclickOrder() { var paramObj = new Object(); // 弹出模式窗口,集成页面传入参数 orderTag var callFlag ...
6. **自定义事件/信号量**:如果使用了某种框架如jQuery UI或Bootstrap的模态对话框,可能有自定义事件机制,可以在打开或关闭窗口时触发事件,传递数据。 在这个例子中,`MikeCat_pcwin.aspx`可能是主页面,`cwin....
这个API允许开发者在当前页面上弹出一个模态对话框,显示另一个网页内容。然而,由于同源策略的限制,`showModalDialog`在处理跨域请求时会遇到障碍。本文将深入探讨这个问题,并提供解决方案。 **什么是同源策略?...
弹出层通常通过JavaScript、jQuery或其他前端库来创建,用于实现模态对话框、警告提示、表单提交等场景。它们可以是简单的div元素通过CSS设置为透明背景和居中显示,也可以是复杂的组件,包含自定义样式和交互。 1....
jQuery Boxy是一款jQuery插件,主要用于创建弹出层对话框,它可以帮助开发者在网页上快速实现各种弹出效果。...这样,无论是创建模态对话框还是在用户执行特定操作时请求确认,Boxy都能提供灵活的解决方案。
在Flex中,弹出窗口常用于显示模态对话框、信息提示或用户输入表单等。 数据传输通常涉及组件间的通信,这可以通过事件传递、共享对象或应用级别变量来实现。在Flex中,我们可以使用以下几种方式在弹出窗口和主应用...
3. 使用showModalDialog()和showModelessDialog()方法:这些方法允许我们在弹出窗口中显示HTML内容,并且可以创建模态和非模态对话框。模态对话框通常拥有一个关闭按钮,而非模态对话框则在打开其他窗口后会自动关闭...
2. **样式和交互**:确保`iframe`中的内容正确显示和交互,可能需要对CSS和JavaScript进行精细调整,以适应模态对话框的样式和行为。 3. **安全性和隐私**:`iframe`加载的内容可能受到同源策略的限制,如果对话框...
为了提高用户体验,弹出提示可以设计成模态对话框、 toast 提示或者浮动通知,还可以添加动画效果和关闭按钮。同时,考虑到错误处理,当请求失败时,应该提供相应的错误提示。 六、异步加载与进度提示 对于大文件...
5. **模态对话框**:创建带有关闭按钮和遮罩层的模态对话框,确保用户关注弹出内容。 ### 二、安装与基本使用 首先,确保项目中已引入jQuery库。然后下载ColorBox插件,解压后将`colorbox`目录放入项目资源文件夹...
在IT行业中,弹出窗口是一种常见的用户界面设计技术,它用于显示额外的信息或者进行特定的操作。"背景固定"和"iframe"是实现弹出窗口功能时可能会涉及到的关键概念。接下来,我们将深入探讨这两个主题以及它们如何...
Greybox是一种JavaScript库,它允许在网页中以模态对话框的方式展示内容,提供了一种优雅的遮罩层效果,使得用户只能专注于弹出的窗口,而忽略背景的其他元素。它通过动态改变CSS样式和JavaScript交互来实现这一功能...
在IT行业中,`showModalDialog`是一个非常特殊的浏览器API,主要用于弹出模态对话框,它在网页应用中起到了展示信息、获取用户输入或者执行特定任务的作用。这篇名为"showModalDialog技术文章"的博客文章可能详细...
在实现弹出登录窗口时,jQuery提供了方便的API来操作DOM元素,如`$("#elementId")`用于选取指定ID的元素,`.show()`和`.hide()`控制元素的显示与隐藏,`.fadeIn()`和`.fadeOut()`则可以实现平滑的显示和消失效果。...
1. `window.showModalDialog`方法:这是在早期IE浏览器中用于弹出模态对话框的一个方法。该方法会创建一个新的模态窗口,显示指定的HTML内容,并且这个对话框是阻塞式的,即在关闭前用户不能与父窗口进行交互。 2. ...
5. **模态对话框**:为了提供弹出窗口预览体验,可以使用Bootstrap的模态组件或者其他自定义CSS样式来创建弹出层。当用户点击链接时,显示这个模态框,并将预览内容加载到其中。可以使用jQuery的`.modal('show')`...
Layer是一个常用于Web开发中的JavaScript弹出层插件,它能够创建各种样式的提示框,包括模态对话框、信息提示框、加载提示框、iframe嵌入页面等多种形式。在Web开发中,常常会使用iframe来构建页面,这样的页面结构...
在Web开发中,创建弹出窗口是常见的交互方式,用于显示额外信息或进行特定操作。在JavaScript中,有两个主要的方法可以实现这一功能:`window.showModalDialog()` 和 `window.open()`。这两个方法虽然都能打开新的...
Bootstrap模态框(Modal)是Bootstrap框架中一个强大的组件,它允许我们在页面上弹出一个对话框或窗口,提供额外的信息或功能。默认情况下,模态框会添加一个全屏的背景层(通常称为"modal-backdrop"),用于遮罩并...