js模态窗口
最近在看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模态窗口的更多相关文章
- JQuery Dialog(JS模态窗口,可拖拽的DIV) 效果实现代码
效果图 调用示意图 交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的“提交”按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户 ...
- JS模态窗口返回值兼容问题解决方案
因系统要兼容原IE已使用的关闭方法,经调试测得,需对window.dialogArguments进行再较验,不然易出问题. function OKEnd(vals) { if (vals == nul ...
- js模态窗口返回值(table)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS弹出模态窗口下拉列表特效
效果体验:http://hovertree.com/texiao/js/20/ 或者扫描二维码在手机体验: 点击选择城市后,在弹出的层中的输入框,输入英文字母 h,会有HoverTree和Hewenq ...
- AnimatedModal.js – CSS3 全屏模态窗口
AnimatedModal.js 是一个用来创建一个全屏模态窗口的 jQuery 插件,基于 CSS3 过渡实现.您可以利用 Animate.css 中的转换或自行创建自己的过渡效果.支持 Firef ...
- 使用异步js解决模态窗口切换的办法
核心代码 js ="setTimeout(function(){document.getElementsByTagName('Button')[3].click()},100);" ...
- JS 弹出模态窗口解决方案
最近在项目中使用弹出模态窗口,功能要求: (1)模态窗口选择项目 (2)支持选择返回事件处理 在IE中有showModalDialog 方法,可以很好的解决该问题,但是在Chrome中和FF中就有问题 ...
- js实现非模态窗口增加数据后刷新父窗口数据
父窗口是由两个部分组成,一个html的table,一部分是extjs的gird. 点击grid面板[增加]按钮将会弹出非模态窗口进行新数据的编辑页面 下面是按钮的触发函数代码: var a = win ...
- Codrops 教程：基于 CSS3 的精美模态窗口效果
Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示.这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动 ...
随机推荐
- ThinkPHP第十五天(setField、setInc、setDec、关联模型)
1.ThinkPHP中的比较特殊连贯操作 如果要更新某个字段可以用setField方法,比如M('user')->where('id=1')->setField('username','T ...
- w2wp.exe 已附加有调试器，但没有将该调试器配置为调试此未经处理的异常
一.问题描述 昨天系统联调,用到了VS2010 附件进程,把w2wp.exe 进程添加到vs2010 的调试进程中,这样其他系统访问我们系统,就可以捕获断点进行调试 但是,今天F5 调试的时候,发现直 ...
- codeforces 622F. The Sum of the k-th Powers 拉格朗日插值法
题目链接 求sigma(i : 1 to n)i^k. 为了做这个题这两天真是补了不少数论, 之前连乘法逆元都不知道... 关于拉格朗日插值法, 我是看的这里http://www.guokr.com/ ...
- type,isinstance判断一个变量的数据类型
type,isinstance判断一个变量的数据类型 import types type(x) is types.IntType # 判断是否int 类型 type(x) is types.Strin ...
- 【源码】实现Android闹钟功能使用HTML+JS，并附带Alarm代码分享
先是开发手册中最终功能的实现函数,再是Alarm接口的源码. 参数: argu:型如“key1=value1;key2=value2;......”的参数表.首先,该参数表支持 rexseeNotif ...
- 使用python网络库下载
下载1000次网页资源 1,普通循环方式下载1000次,非常慢 #!/usr/bin/python # -*- coding: utf-8 -*- import sys import os impor ...
- C++设计模式实现--组合(Composite)模式
一. 举例 这个样例是书上的,如果有一个公司的组结结构例如以下: 它的结构非常像一棵树,当中人力资源部和財务部是没有子结点的,详细公司才有子结点. 并且最关健的是,它的每一层结构非常相似. 代码实现例 ...
- WLAN和WIFI的区别
在刚刚为大家介绍的wifi上网是什么意思?文章中为大家介绍了什么wifi无线上网,但大家可能会有这样的疑问,听说最多的应该是WLAN无线上网,很多笔记本电脑使用的都是WLAN无线上网,那么wlan和w ...
- 远程登录 Windows server 2008 黑屏
scenerio: 远程登录 Windows server 2008 黑屏,别人那里一切正常. Solution:在黑屏界面,点击桌面,按住Ctrl+Alt+End键 -> Log Off. ...
- 裸机代码(uboot) : clear bss
一. bss介绍: 代码中函数.变量.常量 / bss段.data段.text段 /sct文件..map文件的关系[实例分析arm代码(mdk)] bss和data的区别: 全局的未初始化变量存在于. ...