`
malson
  • 浏览: 5898 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

页面弹出框总结

    博客分类:
  • js
阅读更多
三种方法:
window.open();创建一个显示HTML内容的子页面
window.showModalDialog();创建一个显示HTML内容的模态对话框,必须关闭弹出子窗口才能对父页面进行操作
window.showModelessDialog();创建一个显示HTML内容的非模态对话框,可以不关闭弹出子窗口继续对父页面进行操作


参数:
window.open(pageURL,name,features,replace);
说明:新建一个窗口或者查找一个已经存在浏览器窗口
pageURL 为子窗口路径
name 为子窗口句柄,设置新窗口的名称,如果指定了一个已经存在的窗口,则返回对该窗口的引用,parameters会被忽略
features 为窗口参数(各参数用逗号分隔)
replace 可选,设置新窗口中的操作历史的保存方式,true创建新历史记录false替换旧的历史记录

window.showModalDialog(sURL,vArguments,sFeatures);
window.showModelessDialog(sURL,vArguments,sFeatures);
sURL 同pageURL,要显示html的路径
vArguments 变量,用来向弹出框传递参数,类型不限,对话框通过window.dialogArguments来获取
sFeatures 同features,弹出框的设定参数,可以使用以下的一个或几个,用分号“;”隔开


传递:
window.open();可以通过window.opener获得父页面的任何元素
说明:内嵌到html中的iframe中的html,通过window.parent获得父页面的任何元素
父页面获取子页面的任何元素通过获取到存放子页面的容器对象的contentWindow属性document.getElementById(id).contentWindow

window.showModalDialog();是通过方法第二个参数传递需要的参数的,可以是任何类型,一般情况定义一个Object,给Object添加要传递的参数。
//传递参数
var numArray = new Array();
var str = 'aa';
var obj = new Object();
function alertTip(tip){
alert(tip);
}
obj.document = window.document; //将父页面的document对象传递过去,弹出框可以操作父页面任何元素
obj.array = numArray; //传递数组
obj.str = str; //传递字符串
obj.alertTip = alertTip; //传递方法
var returnValue = window.showModalDialog(sURL,obj,sFeatures); //窗口返回值
if(returnValue){} //窗口关闭后会继续执行
//获取参数
var num = window.dialogArguments.numArray[0];
var str = window.dialogArguments.str;
var inputValue = window.dialogArguments.document.getElementById(id);
window.dialogArguments.alertTip('Alert');
window.returnValue = true; //设定返回值,可以是任何类型,也可以定义一个Object类型,你懂的

window.showModelessDialog();跟window.showModalDialog();区别就是在于返回值上,showModalDialog弹出窗口后,父页面就会停止往下执行,
只有当把弹出框关闭后才会继续执行,这时弹出框会返回一个参数给父页面,父页面可以对这个参数进行处理。所以如果需要关闭弹出框后父页面需要做一些处理,那就请使用showModalDialog
使用showModelessDialog后,父页面会继续执行,两者是分离开的,所以两者间关联少了,父页面无法获取到弹出框的元素



窗口参数说明:
1.dialogHeight :对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
2.dialogWidth: 对话框宽度。
3.dialogLeft: 离屏幕左的距离。
4.dialogTop: 离屏幕上的距离。
5.center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。
6.help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。
7.resizable: {yes | no | 1 | 0 } 〔IE5+〕:是否可被改变大小。默认no。
8.status: {yes | no | 1 | 0 } 〔IE5+〕:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
9.scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。下面几个属性是用在HTA中的,在一般的网页中一般不使用。
10.dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。
11.edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。
12.unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。
分享到:
评论

相关推荐

    div弹出框js弹出框

    总结,div弹出框和js弹出框都是实现网页交互的有效手段,它们允许开发者根据需求定制弹出框的样式和功能。通过熟练掌握这两种方法,我们可以为用户提供更加丰富和个性化的网页体验。在实际应用中,结合CSS和...

    伪弹出框jquery

    总结起来,"伪弹出框jquery"是一个使用jQuery实现的自定义弹出框解决方案,它允许开发者灵活地控制弹出框的内容和样式,同时提供动画效果以增强用户体验。通过分析`tc.js`中的代码,我们可以深入了解如何结合HTML、...

    可自定义的底部弹出框

    总结来说,"可自定义的底部弹出框"是一种常用的Android界面组件,它结合了GridView、自适应布局和动画效果,提供了灵活且友好的用户交互方式。通过学习和实践,开发者可以将这种设计应用于各种应用场景,提升应用的...

    html弹出框

    5. **模态效果**:为了阻止用户在弹出框显示时与页面其他部分交互,可以设置一个半透明的遮罩层覆盖整个页面。 引入CSS和JS文件后,你可以通过简单的API调用来使用这个自定义弹出框。例如,可能有一个`showDialog()...

    artDialog弹出框效果

    通过IFrame,弹出框可以加载外部页面或嵌入网页中的某个部分,使得弹出框能够承载更复杂的内容,比如表单填写、富文本编辑等。 5. **版本管理**:在压缩包中提到的`artDialog4.1.6`表明这是artDialog的一个特定版本...

    自定义JavaScript弹出框组件

    总结,自定义JavaScript弹出框组件是一种提升网页交互体验的重要手段。开发者可以根据项目需求,结合HTML、CSS和JavaScript技术,打造出符合业务场景的弹出框,从而提高用户界面的友好性和功能性。同时,这种组件化...

    自定义 jquery 弹出框 demo1

    "`确保在页面加载时不显示弹出框。`<h2>`和`<p>`元素用于展示标题和内容,而`<button>`元素则是关闭弹出框的触发器。 接下来是CSS部分,用于美化我们的弹出框。我们可以设定弹出框的位置、样式以及透明度等属性,...

    model弹出框

    "Model弹出框"在前端开发中是一种常见的用户交互元素,用于显示临时信息、提示、表单或任何需要从主页面分离出来的内容。它通常是一个浮动的层,覆盖在页面主要内容之上,允许用户与弹出框进行交互而不离开当前页面...

    自定义弹出框样式 alert修改

    ### 自定义弹出框样式 alert修改 在网页开发过程中,我们经常会遇到需要向用户展示提示信息的情况。传统的JavaScript `alert`方法虽然简单易用,但其样式固定且无法自定义,这在追求用户体验和界面美观的现代Web...

    jquery弹出框样式

    在网页设计中,弹出框是一种常见的用户界面元素,用于在不离开当前页面的情况下显示额外信息或交互功能。它们可以是警告、确认对话框,也可以是更复杂的模态窗口,如登录表单或图片画廊。 在jQuery中实现弹出框样式...

    jquery弹出框特效

    总结,jQuery 1.4.3结合fancybox插件是实现弹出框特效的有效工具,它提供了一种简洁、强大的方式来增强网页的用户体验,同时保持代码的简洁性和可维护性。通过学习和实践,开发者可以轻松地创建出符合项目需求的个性...

    一个简易的弹出框的框架,实现各种弹出层

    总结来说,"layer-v1.6.0"是一个专注于弹出层和对话框实现的轻量级框架,它简化了开发者在UI设计中添加弹出框的过程,提供了多种类型的弹出层模板,并且支持自定义配置以满足个性化需求。通过合理利用这个框架,...

    angularjs 弹出框,源码扩展

    总结,扩展AngularJS的弹出框功能涉及到服务的创建、CSS定位、延迟消失、HTML编译、指令使用、事件监听等多个方面,通过这些技术,我们可以构建出高度定制且易于维护的弹出框解决方案。文件`testToast`可能包含了...

    javascript模拟页面弹出框

    总结来说,JavaScript模拟页面弹出框是一种常见的Web开发技巧,利用`iframe`的特性可以实现高度定制化的弹出交互体验。通过学习“testPopuBox”这个示例,开发者可以深入理解这一技术,并将其应用于自己的项目中,...

    可拖动弹出框插件.zip

    总结起来,"可拖动弹出框插件"是一个提升网页应用交互体验的工具,通过"easydialog.js"库,开发者可以轻松创建具有拖动功能和各种特效的弹出框,以满足不同场景的需求。在实际项目中,结合HTML、CSS和JavaScript的...

    jquery 弹出框

    总结来说,jQuery弹出框主要依赖于jQuery UI库的`dialog`组件。通过灵活配置选项和自定义样式,我们可以轻松创建出符合项目需求的弹出框效果。结合源码学习和在线工具,可以进一步提升开发技能,使弹出框功能更加...

    个性弹出框

    在网页设计中,"个性弹出框"是一个重要的交互元素,它用于吸引用户注意力或提供额外的信息。HTML5虽然没有直接提供内置的弹出框功能,但通过结合CSS和JavaScript库,我们可以创建出各种各样的自定义弹出层。本项目以...

    html5 css3简单的遮罩弹出框动态效果

    总结来说,HTML5和CSS3的结合使我们能够创建出具有遮罩弹出框的动态效果,提供更加互动和引人入胜的网页体验。这需要掌握HTML5的结构化元素和CSS3的动态效果属性,以及对用户体验的细致考量。通过学习和实践,开发者...

    popup 弹出框 js

    总结,`popup`弹出框在网页交互中扮演着重要角色,通过JavaScript可以实现丰富多样的弹出效果,同时要注意设计原则以提供良好的用户体验。无论是内置的对话框还是自定义的弹出框,了解其工作原理和设计技巧对于提升...

    js浮动弹出框特效jquery

    总结一下,"js浮动弹出框特效jquery"是利用jQuery库,结合DOM操作、事件处理和动画效果来创建的一种网页交互功能。通过理解并熟练运用jQuery的核心方法,开发者可以轻松地构建出具有专业品质的浮动弹出框特效,提升...

Global site tag (gtag.js) - Google Analytics