最近在看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. XCode里遇到 #include <XXX.h>file not found的解决方案

    最近在学习如何在C++里调用Java方法,遇到提示 #include <XXX.h> file  not  found 的问题.也google了好久都没有找到合适的解决方案. 认真的研究了 ...

  2. C#通过WebBrowser快速扒站思路积累大量着陆页列表

    现在工作方向已经越来越倾向于项目产品运营相关的东西.对线上运营也有了一定程度的了解. 配合一些技术性的操作,能极大的便利工作中的各种高难度任务,快速提升自我,积累丰富的经验和资源. 以近期制作LP为例 ...

  3. Lotus Sametime 服务器的安装和配置

    IBM Lotus Sametime 是一款强大的实时协作软件,目前最新版本是 7.5.1.通过它,您不仅能够进行网络聊天,而且可以方便地召开网络会议.在网络社区中与其他人进行沟通.了解更多关于 Lo ...

  4. oracle，如何查看视图结构，获得视图中的字段名称、字段类型、字段长度等。

    需要获得一个视图中的字段名称.字段类型.字段长度等信息,该如何编写sql语句.通过select * from user_views可以获得给定用户下所有的视图名称了,但是没找到如何获取视图结构的解决方 ...

  5. 如何将windows版的vim界面语言（默认为中文）设置成英文

    用安装包安装windows版本的vim(下载地址:http://www.vim.org/download.php),vim会自动根据windows的语言设置vim的界面语言.如何将其改为英文呢? 在v ...

  6. Windows Azure 存储的冗余存储选项和只读访问跨地域冗余存储

    我们很高兴地宣布,现在我们使客户可以获得对数据更高的读取可用性.该预览功能称为"只读访问- 跨地域冗余存储(RA-GRS)",使客户可以在存储帐户主要区域无法读取数据时,通过跨 ...

  7. Java学习之DBUtils工具的学习

    简介 commons-dbutils 是 Apache 组织提供的一个开源 JDBC工具类库,它是对JDBC的简单封装,学习成本极低,并且使用dbutils能极大简化jdbc编码的工作量,同时也不会影 ...

  8. 分析php获取客户端ip

    用php能获取客户端ip,这个大家都知道,代码如下: /** * 获取客户端ip * @param number $type * @return string */ function getClien ...

  9. JavaScript推断E-mail地址是否合法

    编写自己定义的JavaScript函数checkEmail(),在该函数中首先推断E-mail文本框是否为空,然后在应用正則表達式推断E-mail地址是否合法,假设不合法提示用户 <script ...

  10. Andorid Binder进程间通信---Binder本地对象，实体对象，引用对象，代理对象的引用计数

    本文參考<Android系统源码情景分析>,作者罗升阳. 一.Binder库(libbinder)代码: ~/Android/frameworks/base/libs/binder --- ...