showModalDialog的简单使用
1、要通过另外一个网页输入结果的网页
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function viewData(cid ,cname) {
//获取通过showModalDialog传过来的window对象
var sdata = window.dialogArguments;
//设置第一个页面的属性值
sdata.document.getElementById("cid").value = cid;
sdata.document.getElementById("cname").value = cname;
//关闭Dialog窗口
window.close();
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>操作</td>
<td>客户ID</td>
<td>客户名称</td>
</tr>
<tr>
<td><button onclick="viewData('001','深圳华为')">选择</button></td>
<td>001</td>
<td>深圳华为</td>
</tr>
<tr>
<td><button onclick="viewData('002','用友软件')">选择</button></td>
<td>002</td>
<td>用友软件</td>
</tr>
</table>
</body>
</html>
2、存储另外一个网页的相关属性，在需要的时候输送给另外一个网页
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<form name="form1" action="test.htm" method="post">
客户ID：<input type="text" name="cid" value="" id="cid"><br/>
客户名称：<input type="text" name="cname" value="" id="cname"><br/>
<input type="button" name="ok" value="请选择客户" onclick="openWin();">
</form>
</body>
<script type="text/javascript">
function openWin() {
window.showModalDialog("msg.htm",window,"dialogHeight:200px;dialogWidth:200px;dialogLeft:350px;dialogTop:350px;center:yes;help:no;");
}
</script>
</html>
3、为了使两个页面更加的独立，在第二个页面调用第一个页面的一个函数
--第二个页面的javascript代码
<script type="text/javascript">
function viewData(cid ,cname) {
//获取通过showModalDialog传过来的window对象
var sdata = window.dialogArguments;
//设置第一个页面的属性值
// sdata.document.getElementById("cid").value = cid;
// sdata.document.getElementById("cname").value = cname;
// 调用第一个页面的函数
sdata.setValue(cid,cname);
//关闭Dialog窗口
window.close();
}
</script>
--第一个页面的javascript代码
<script type="text/javascript">
function openWin() {
window.showModalDialog("msg.htm",window,"dialogHeight:200px;dialogWidth:200px;dialogLeft:350px;dialogTop:350px;center:yes;help:no;");
}
function setValue(cid,cname) {
document.getElementById("cid").value = cid;
document.getElementById("cname").value = cname;
}
</script>
分享到：
相关推荐
下面将详细介绍`showModalDialog`的使用、功能、优缺点以及相关的HTML和JavaScript知识。 `showModalDialog`的基本语法如下： ```javascript window.showModalDialog(url, [startValue], [features]); ``` 1. `...
本文将详细介绍`window.showModalDialog`的使用方法及其相关知识点。 1. **基本语法** `window.showModalDialog` 的基本调用形式如下： ```javascript var returnValue = window.showModalDialog(url, window, ...
做项目时，碰到了前台页面需要向弹出框传值并且需要使用弹出框的返回值的需要，一开始使用的prompt(); 发现ie浏览器时，prompt()弹出框的位置会固定在左上...后来使用window.showModalDialog(url,params,pos)方法 解决
下面给出两个简单的示例来演示如何使用 `showModalDialog` 和如何在对话框中获取传递的参数： 1. **创建模态对话框并传递参数** ```html <!-- parent.htm --> var obj = new Object(); obj.name = "51js"; ...
总的来说，`showModalDialog`是一个在特定场景下仍具实用价值的函数，尤其对于处理简单的对话框和数据交换。然而，考虑到兼容性和未来发展趋势，开发者应谨慎使用，或者寻找更现代的解决方案来替换。
下面是一个简单的示例，展示了如何使用 `ShowModalDialog`： ```html <!DOCTYPE html> 示例 显示对话框" onclick="showdialog();"> function showdialog() { window.showModalDialog("2.html", "", 'edge...
以下是一个简单的`showModalDialog`刷新窗口的例子： ```html <!DOCTYPE html> 弹窗示例 ()">打开对话框 function openDialog() { var result = window.showModalDialog("dialog.html", window, ...
下面是一个简单的使用`showModalDialog`的例子： **main.html** (父窗口): ```html <!DOCTYPE html> function showModal() { var ret = window.showModalDialog("sub.html?temp=" + Math.random()); alert(...
由于这些方法不是W3C标准的一部分，因此在开发跨浏览器的应用程序时，开发者应考虑使用其他替代方案，比如CSS和JavaScript库（如Bootstrap的模态组件）来创建类似的对话框效果，以确保更好的兼容性和性能。
本篇文章将详细探讨如何使用`showModalDialog`打开模态窗口，并返回值给调用页面。 首先，`showModalDialog`的基本语法如下： ```javascript window.showModalDialog(url, windowObject, options); ``` - `url`: ...
在IT行业中，尤其是在Web开发领域，跨域问题是一个常见的挑战，特别是在使用特定的浏览器API时，比如`showModalDialog`。这个API允许开发者在当前页面上弹出一个模态对话框，显示另一个网页内容。然而，由于同源策略...
要关闭通过这两种方法打开的对话框，可以使用简单的JavaScript代码： ```html 关闭" onclick="window.close()"> ``` 这行代码会在对话框中添加一个“关闭”按钮，点击该按钮即可关闭对话框。 #### 五、...
本文将详细讲解如何通过JavaScript中的showModalDialog方法来创建一个简单的弹出对话框示例，其中还将展示子窗体的使用。 首先，需要了解的是，showModalDialog是一个非常有用的JavaScript函数，主要用于在Web页面...
以下是一个使用 `showModalDialog` 的简单实例，展示了如何从父窗口向对话框传递数据，并从对话框向父窗口返回数据： **parent.htm** ```html var obj = new Object(); obj.name = "51js"; var str = window....
以下是一个简单的 `showModalDialog` 使用示例： **parent.html** ```html function setname(res) { document.getElementById("name").value = res; } function selectTp() { // 把父窗口的setname函数传递给子...
然而，随着浏览器的发展，特别是谷歌浏览器（Chrome）对Web标准的持续更新和优化，`showModalDialog` 在某些版本中逐渐失去了支持，这导致了使用该功能的代码在最新版本的Chrome中可能无法正常工作。 在标题和描述...
### 使用Div模拟showModalDialog模式菜单的实现方法 在网页设计与开发中，有时我们需要创建一个弹出式的对话框或窗口，以便用户可以进行特定的操作而不干扰到页面的其他部分。传统的`showModalDialog`方法已被废弃...
以下是一个简单的例子，展示了如何使用`showModalDialog`和`showModelessDialog`： - `f.html`是主窗口，包含一个按钮，点击按钮会调用`openDialogBox`函数打开子窗口`c.html`。 - `c.html`是对话框窗口，有一个...
下面是一个使用`window.showModalDialog()`的简单示例： ```html var mxh1 = ["mxh", "net_lover", "E"]; var mxh2 = window.open("about:blank", "window_mxh"); // 显示模态对话框 window.showModalDialog("test...