数据结构与算法

使用Javascript创建JQuery风格的模态窗口

发表时间: 2016-11-03 07:03

index.html

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

<title>模态窗口</title>

</head>

<body>

<script>

//alert(1);

function pop(){

//传递参数到模态窗口

var obj=new Object();

obj.name="Hello World---来自父窗口";

var returnStr = window.showModalDialog("model.html",obj,

"dialogHeight=200px;dialogTop=200px;dialogLeft=200px;");

alert("模态窗口返回参数"+returnStr);

//刷新页面

window.location.reload();

}

</script>

<button onClick="pop()">打开模态窗口</button>

<p>模态窗口传参数，并获取返回值</p>

</body>

</html>

model.html

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

</head>

<body>

<script>

// 接受父窗口的参数

var obj=window.dialogArguments;

alert(obj.name);

// 返回参数到父窗口

window.returnValue=’Hello World---来自模态窗口’;

</script>

模态窗口

</body>

</html>

如果直接在浏览器中无法正常运行，那么就将其放在服务器容器中。

热门阅读

推荐阅读