最近在看js，正好公司用的框架中用到了模态窗口，以前没有接触过，现在把模态窗口的用法先记下来。

常用的浏览器chrome，Firefox，ie11，这三种分别支持document.open()，window.showModalDialog()，window.showModalDialog()的方式。下面还是直接给出代码，比较直观：

motaichuangkou.html

<!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=utf-8" />

<title>无标题文档</title>

	<script>

		//全局变量

		var a = "wyl";

		window.b = a;

		//封装 模态窗口，

		function motai(html,parameter,size){

				//document.open(html,parameter,size);

				var d = 123;//主要是调试改网页的时候在此处设置断点用

				//此处做能力检测，进行兼容

				if(window.showModalDialog){

						console.log('showModalDialog 方式');

						window.showModalDialog(html,parameter,size);

				}else{

					console.log('open 方式');

					document.open(html,parameter,size);

				}

			}

		window.onload = function(){

				var btn1 = document.getElementById('btn1');

				btn1.onclick = motai("test2.html",window.a,"dialogWidth:400px;dialogHeight:500px;");

			}

	</script>

</head>

<body>

	<input type="button" id="btn1" />

</body>

</html>

　　

　　前面html中用到的test2.html：

<!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=utf-8" />

<title>无标题文档</title>

	<script>

		alert("b:"+window.b);

	</script>

</head>

<body>

	<input type="text" />

</body>

</html>

　　

　　这样只要直接执行就可以看到效果了。

js模态窗口的更多相关文章

  1. JQuery Dialog(JS模态窗口,可拖拽的DIV) 效果实现代码

    效果图 调用示意图   交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的“提交”按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户 ...

  2. JS模态窗口返回值兼容问题解决方案

    因系统要兼容原IE已使用的关闭方法,经调试测得,需对window.dialogArguments进行再较验,不然易出问题. function OKEnd(vals) { if (vals == nul ...

  3. js模态窗口返回值(table)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. JS弹出模态窗口下拉列表特效

    效果体验:http://hovertree.com/texiao/js/20/ 或者扫描二维码在手机体验: 点击选择城市后,在弹出的层中的输入框,输入英文字母 h,会有HoverTree和Hewenq ...

  5. AnimatedModal.js – CSS3 全屏模态窗口

    AnimatedModal.js 是一个用来创建一个全屏模态窗口的 jQuery 插件,基于 CSS3 过渡实现.您可以利用 Animate.css 中的转换或自行创建自己的过渡效果.支持 Firef ...

  6. 使用异步js解决模态窗口切换的办法

    核心代码 js ="setTimeout(function(){document.getElementsByTagName('Button')[3].click()},100);" ...

  7. JS 弹出模态窗口解决方案

    最近在项目中使用弹出模态窗口,功能要求: (1)模态窗口选择项目 (2)支持选择返回事件处理 在IE中有showModalDialog 方法,可以很好的解决该问题,但是在Chrome中和FF中就有问题 ...

  8. js实现非模态窗口增加数据后刷新父窗口数据

    父窗口是由两个部分组成,一个html的table,一部分是extjs的gird. 点击grid面板[增加]按钮将会弹出非模态窗口进行新数据的编辑页面 下面是按钮的触发函数代码: var a = win ...

  9. Codrops 教程：基于 CSS3 的精美模态窗口效果

    Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示.这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动 ...

随机推荐

  1. 5.6.3.8 fromCharCode()方法

    String构造函数本身还有一个静态方法:fromCharCode().这个方法的任务是接收一或多个字符编码,然后将它们转换成一个字符.从本质上来看,这个方法与实例方法charCodeAt()执行的是 ...

  2. Linux 网络编程: echo Service

    前言 大病初愈,感谢某人的陪伴,感谢王乐庆同学和赵攀同学的细心照顾.原以为过了第八周就不忙了,却没想到还有明天的党章考试.还是写代码比背党章有意思~趁着服务器还没过期,赶紧把 echo 完成了.关于错 ...

  3. PHP将Excel导入数据库以及数据库数据导出至Excel

    一.导入 导入需要使用能读取Excel的组件,网上也有比较好的组件,这里分享我使用的:下载  提取码:vxyn.(注意两个文件有引用关系) <?php //传入要导入的Excel的文件名 fun ...

  4. 简明的例子讲解position:relative、float、overflow:hidden和inline-block

    标签(空格分隔): css relative float 我们通过一个简单的实验来了解position:relative float overflow:hidden 和 inline-block. 下 ...

  5. Linux C网络编程学习笔记

    Linux C网络编程总结报告 一.Linux C 网络编程知识介绍: 网络程序和普通的程序有一个最大的区别是网络程序是由两个部分组成的--客户端和服务器端. 客户端:(client) 在网络程序中, ...

  6. android学习----overridePendingTransition

    1 Activity的切换动画指的是从一个activity跳转到另外一个activity时的动画. 它包括两个部分:一部分是第一个activity退出时的动画:另外一部分时第二个activity进入时 ...

  7. 基于Visual C++2013拆解世界五百强面试题--题15-递归相加

    有一分数序列: 1/2 , 1/4 , 1/6 , 1/8 ......,用递归的方法,求此数列20项之和. 可以看出规律:每一项位1/n*2 这个很容易些递归,但是要注意一点,使用浮点数相除保存: ...

  8. BZOJ 1618: [Usaco2008 Nov]Buying Hay 购买干草( dp )

    无限背包dp.. 因为题目中说至少到 H 磅 , 我就直接把 H * 2 了.. ----------------------------------------------------------- ...

  9. 再谈协方差矩阵之主成分分析PCA

    上次那篇文章在理论层次介绍了下协方差矩阵,没准很多人觉得这东西用处不大,其实协方差矩阵在好多学科里都有很重要的作用,比如多维的正态分布,再比如今天我们今天的主角——主成分分析(Principal Co ...

  10. JavaScript 导学推荐

    基本开始js学习的时候,可能会觉得很混乱,一开始都是从一些简单的表单验证还有拷贝别人效果代码,然后再慢慢去深入了解.我是觉得js是需要一定语言编程基础,我是觉得随着深入,JS的里面实在不算太好理解,个 ...