(面试题)html中创建模态窗口的方法有哪些?
一、创建模态和非模态对话框
除了alert(""); confirm(""); prompt("");之外还有
创建模态对话框:
vReturnValue = window.showModalDialog(sURL [, vFreeArgument] [, sOrnaments]);
如:window.showModalDialog("callee.htm")
创建非模态对话框:
vReturnValue = window.showModelessDialog(sURL [, vFreeArgument] [, sOrnaments]);
如:window.showModelessDialog("callee.htm")
二、控制对话框大小和位置
下面的代码将打开一个高200px、宽800px的对话框:
window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px');
以下代码,看看关闭居中属性后新窗口的位置:
window.showModalDialog('callee.htm','','dialogHeight:200px;dialogWidth:800px;center:no');
三、改变对话框外观
下面的代码将去除上下文关联提示图标、不显示状态栏、窗口边缘风格为凹陷:
showModelessDialog("callee.htm","","status:0;help:0;edge:sunken");
四、从父页面页面传递数据到子页面
(一)传递值类型数据
在caller.htm页面中输入以下代码:
<INPUT TYPE="button" VALUE="创建模态对话框" onclick="fnOpenModal()">
<br><br>
<INPUT TYPE="button" VALUE="创建非模态对话框" onclick="fnOpenModeless()">
<script language="javascript">
<!--
function fnOpenModal()
{
window.showModalDialog("callee.htm","打开了一个新模态窗口")
}
function fnOpenModeless()
{
window.showModelessDialog("callee.htm","打开了一个新非模态窗口")
}
//-->
</script>
在callee.htm页面中输入以下代码:
<SCRIPT LANGUAGE="JavaScript">
<!--
alert(dialogArguments);
//-->
</SCRIPT>
(二)传递数组引用类型数据 (同样可以为对象传值)
第一种值类型数据的传递中,在callee.htm页面中只能读取caller.htm页面的传递数据。
当需要对caller.htm页面的传递内容进行修改时,就需使用到数组引用类型的传递方式。
首先,在caller.htm页面中输入以下代码:
<INPUT TYPE="button" VALUE="创建模态对话框" onclick="fnOpenModal()">
<br><br>
<INPUT TYPE="button" VALUE="创建非模态对话框" onclick="fnOpenModeless()">
<script language="javascript">
<!--
var a = new Array;
a[0]="first";
a[1]="second";
a[2]="third";
function fnOpenModal()
{
window.showModalDialog("callee.htm",a)
}
function fnOpenModeless()
{
window.showModelessDialog("callee.htm",a)
}
// -->
</script>
然后在callee.htm页面中输入以下代码:
<SCRIPT LANGUAGE="JavaScript">
<!--
a = dialogArguments; //特殊关键字,表示接收的的参数对象
alert(a);
a[0] = "fourth";
// -->
</SCRIPT>
(面试题)html中创建模态窗口的方法有哪些?的更多相关文章
- 使用jQuery创建模态窗口登陆效果
日期:2013-8-22 来源:GBin1.com 隐藏模态窗口技术是一种很好的解决方案,用于处理不是特有必要出现在网页上的界面元素.社交网络可以使用模态窗口传达私人讯息以及只针对会员才能看 到的表 ...
- [Win32]创建模态窗口
http://www.cnblogs.com/zplutor/archive/2011/02/20/1958973.html 在Win32编程中,如果要显示一个模态窗口,一般是先创建对话框模板,然后使 ...
- IE 中创建 子窗口 传值 与接收值 【window.showModalDialog】
父窗口 创建一个窗口 var backinfo = window.showModalDialog('UserSelect.aspx', '', 'dialogHeight=600px; dialogW ...
- Javascript 中创建自定义对象的方法(设计模式)
Javascript 中创建对象,可以有很多种方法. Object构造函数/对象字面量: 抛开设计模式不谈,使用最基本的方法,就是先调用Object构造函数创建一个对象,然后给对象添加属性. var ...
- Oracle中创建自增字段方法
oracle没有ORACLE自增字段这样的功能,但是通过触发器(trigger)和序列(sequence)可以实现. 下面给大家讲个例子: 1.在Oracle中创建一个表: .创建一个表 ) prim ...
- 极其简单的用JS在浏览器中创建下载文件的方法
有这样一个需求,在js中动态创建一个页面,然后下载该页面为word文档,研究了一上午,最后发现实现起来如此简单. 在js中创建如下方法:(直接复制即可) function downloadFile(f ...
- JavaScript中创建自定义对象的方法
本文内容参考JavaScript高级程序设计(第3版)第6章:面向对象的程序设计 ECMA-262中把对象定义为:“无序属性的集合,其属性可以包含基本值.对象或者函数.”我所理解的就是对象就是一个结构 ...
- Floodlight 中创建消息对象的方法
在 floodlight 中创建各种openflow message 和 action 等採用的是简单工厂方式.BasicFactory类(实现OFMessageFactory接口.) ...
- java4中创建内对象的方法
在java程序中,对象可以被显式地或者隐式地创建.四种显式的创建对象的方式: ● 用new语句创建对象 ● 运用反射手段,调用java.lang.Class 或者 java.lang. ...
随机推荐
- 关于操作系统:eos、deepin
朋友星神推荐了这两个操作系统:eos.deepin,大致看了一下介绍,貌似看起来很棒,界面清新,而且开源,支持的应用也不少,后续我准备尝试一下.此处Mark一下: 官网分别为: https://ele ...
- 微信小程序 - radio/checkbox自定义组件
更新 2019-01-26:首次发布 2019-01-27:增加默认取值选中radio/checkbox,checkbox需在onload取值 2019-01-28:增加radio取值不存在红色提示和 ...
- switch omega - VNP
文件下载 安装插件 1.Chrome地址栏输入:chrome://extensions/ 2.将附件拖入窗口,安装
- javascript数组去重复
数组去重 知乎上看到有人去腾讯面试,然后发了面试的js题目,有一个是数组去重 我的土办法 var arr = ['a', 'g', 'q', 'd', 'a', 'e', 'q']; console. ...
- http 三次握手
1.三次握手 目的:主要规避由于网络阻塞,传输不畅等原因导致服务器端端口一直被占用,无法释放端口资源.(想想假设只要一次就建立连接,服务器响应后浏览器若是没收到数据,等待一段时间后,网络超时,浏览器重 ...
- ReactNative踩坑日志——使用async/await语法解决网络请求的异步导致的指令执行顺序错乱问题
转载请注明原文地址: ReactNative的fetch是天然的异步请求,因此,如果你在一个代码块中使用了fetch,那么在执行的时候程序不会等待网络响应结束才执行下一条代码,而是会直接按顺序执行完整 ...
- [转]jquery设置select选中,赋值等操作
一.基础取值问题 例如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selec ...
- java 怎么打印变量
//Test.java public class Test16{ public static void main(String args[]){ int age=28; System.out.prin ...
- 【原创视频教程】XSL视频教程[共9集]
这些视频都是13年-14年两年里面录制的,怀着一份创造之心, 可能说得不对,或者说得肤浅,望见谅....也请指正... 谢谢你的支持.. 更多资料:北盟网 www.bamn.cn ---------- ...
- eclipse 找类的jar包方便工具
经常在开发过程,因为使用到比较多的类库(jar文件),在开发时经常会找不到需要的类文件存放在哪个jar文件中,这时classlocator这个插件就带我们带来极大的方便,可以帮我很快速的找到我们需要的 ...