Javascript 里面也有模式对话框和非模式对话框的概念,说的这么复杂,其实两者区别就是是在对话框被关闭之前用户能否在同一页面的其他地方进行工作。比如“打开文件” 对话框便是典型的模式对话框,在你对这个对话框做出动作才能对打开该对话框的程序进行其他操作,而非模式对话框则不必
javascript里面打开模式对话框是showModalDialog(),非模式对话框是 showModalessDialog(),IE5+支持直接调用该方法,但对以下版本需使用window.来调用,我比较喜欢的是使用后者,因为这样我的程序会好看 --!!
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
上面面是两个函数的表达式,vReturnValue当然就是返回值了;sURL必选,为你要打开的页面; vArguments可选,用来向对话框传递参数;sFeatures可选,打开对话框的属性,各个属性直接用;隔开,下面是我Google到的一下 sFeatures的参数,供参考:
1. dialogHeight: 对话框高度(单位有em和px等,我一般用px)
2. dialogWidth: 对话框宽度(同height)
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
10. dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no
11. edge:{ sunken | raised }:指明对话框的边框样式。默认为raised
12. unadorned:{ yes | no | 1 | 0 | on | off }:默认为no
这里需要说明的一点就是在设置打开窗口属性时,即sFeatures,一定不要忘了feature前面是argument,要像 window.showModalDialog(sURL,"","resizable:yes;scroll:no;")这样,我就犯过这种错误。
分享到:
相关推荐
对话框分为两种主要类型:模式对话框(Modal Dialog Box)和非模式对话框(Non-Modal Dialog Box)。这两者在用户交互和应用程序流程上有着显著的区别。 1. **模式对话框** 模式对话框是强制用户与其交互的窗口,...
Javascript里面分模式对话框和非模式对话框,其实两者区别就是在对话框被关闭之前用户能否在同一页面的其他地方进行工作。比如“打开文件”对话框便是典型的模式对话框,在你对这个对话框做出动作才能对打开该对话框...
2. **CSS样式**:接着,为对话框和遮罩层设置CSS样式。对话框通常需要`position: absolute`以便自由定位,而遮罩层则使用`position: fixed`覆盖整个屏幕。例如: ```css #modal-dialog { position: absolute; ...
介绍了javascript中模式对话框的用法 (showModalDialog)
"JQuery 模式对话框实例"是指使用 jQuery 创建的一种特殊的对话框,它在页面上弹出时,会将背景变暗,使用户无法与背景中的其他元素交互,直至对话框关闭。这种模式对话框常用于警告、确认、输入信息等场景。 在 ...
总结,jQuery UI的`dialog`插件为Web开发者提供了创建模式对话框的强大工具,通过配置各种选项和方法,可以满足不同场景下的需求。结合实际项目的交互设计,合理运用模式对话框,可以提高用户体验,增强网页的互动性...
首先,模式对话框通常由JavaScript库如jQuery UI或Bootstrap提供,它们提供了简洁的API来创建和控制对话框。在HTML文件`a.html`中,我们可能会看到如下结构: ```html <!DOCTYPE html> ...
要创建一个模式对话框,我们需要首先引入jQuery库和jQuery UI库,因为模式对话框是jQuery UI的一个组件。jQuery 1.3虽然较旧,但仍然可以与早期版本的jQuery UI配合使用。请注意,从jQuery 1.9开始,jQuery UI不再...
综合以上,"模式对话框(可刷新)+可移动div+遮罩层"是一个高级的前端UI技术组合,它在很多现代Web应用中都有广泛应用,比如在线协作工具、内容管理系统和电子商务平台等。通过学习和实践这些技术,开发者可以提升网页...
至于“工具”标签,可能指的是博客中推荐了一些实用的工具或框架,帮助开发者更方便地创建和管理模式对话框,比如前面提到的jQuery UI或Bootstrap,或者是前端开发的集成开发环境(IDE)和调试工具。 文件名为...
JavaScript(简称JS)是一种广泛用于客户端Web开发的脚本语言,它可以实现动态交互的效果,而JS打开模式对话框则是提供了一种与用户交互的方式。在本文中,我们将深入探讨两种主要的JS对话框方法:`showModalDialog...
在网页设计和开发中,"弹出网页模式对话框"是一种常见的交互手段,它用于向用户展示信息或者获取用户的输入,而不会离开当前页面。这种技术通常涉及到JavaScript、HTML和CSS的综合运用,以实现优雅的用户体验。接...
在Web应用中,模式对话框通常是通过JavaScript库如jQuery UI或Bootstrap的模态组件来实现的。这些库提供了方便的API和丰富的样式,使开发者可以轻松创建具有弹出效果的对话框。 1. **使用jQuery UI创建模式对话框**...
jQuery SimpleModal以其简单易用和高度可定制的特点,成为Web开发者创建模式对话框的首选工具。通过理解其基本使用方法和高级功能,开发者可以轻松地为网页添加丰富多样的交互体验,提升网站的用户友好性。
标题提到的"用于改进Bootstrap4模式对话框在手机上的用户体验",意味着我们将探讨如何通过纯CSS的方法来调整模态对话框的布局、交互以及可访问性,使其更适合手机用户。以下是一些可能的改进策略: 1. **自适应大小...
在WebApplication1项目中,可能包含了利用这些对话框功能的代码实例,通过对这些代码的学习,开发者可以更好地理解如何在实际场景中应用JavaScript的对话框模式,提升网页的交互性和用户体验。在开发过程中,合理...
1. **JavaScript和jQuery UI**:通过引入jQuery库和jQuery UI,我们可以利用`dialog()`函数创建模式对话框。首先,在页面中包含必要的脚本库,然后选择一个HTML元素(如div)作为对话框的内容,并配置相应的选项,如...
在创建兼容IE6、7、8以及Firefox等主流浏览器的网页模式对话框时,开发者需要考虑不同浏览器之间的差异和兼容性问题。 首先,让我们了解一些基本概念。在HTML中,最原始的对话框是`<dialog>`元素,但这个元素在旧版...
本示例将深入探讨如何使用C#在VS2005中创建和应用模式对话框(Modal Dialog)来增强用户体验并实现数据交互。模式对话框是一种阻塞用户界面,直到用户与对话框进行交互后才能继续操作的窗口。 首先,让我们理解什么...