`
lihuiqi_cn
  • 浏览: 26115 次
  • 性别: Icon_minigender_2
  • 来自: 河北
社区版块
存档分类
最新评论

js弹框确定位置

阅读更多
Javascript有许多内建的方法来产生对话框,如:window.alert(), window.confirm(),window.prompt().等。 然而IE提供更多的方法支持对话框。如:

    showModalDialog() (IE 4+ 支持)
   showModelessDialog() (IE 5+ 支持)

    window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框,由于是对话框,因此它并没有一般用window.open()打开的窗口的所有属性。

    window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

    当我们用showModelessDialog()打开窗口时,不必用window.close()去关闭它,当以非模态方式[IE5]打开时, 打开对话框的窗口仍可以进行其他的操作,即对话框不总是最上面的焦点,当打开它的窗口URL改变时,它自动关闭。而模态[IE4]方式的对话框始终有焦点(焦点不可移走,直到它关闭)。模态对话框和打开它的窗口相联系,因此我们打开另外的窗口时,他们的链接关系依然保存,并且隐藏在活动窗口的下面。

使用方法如下:
   vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
    vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])

参数说明:
    sURL
   必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
    vArguments
   可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
    sFeatures
   可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
    dialogHeight 对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
  dialogWidth: 对话框宽度。
  dialogLeft: 距离桌面左的距离。
  dialogTop: 离桌面上的距离。
  center: {yes | no | 1 | 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。
  help: {yes | no | 1 | 0 }:是否显示帮助按钮,默认yes。
  resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改变大小。默认no。
  status: {yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
    scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是否显示滚动条。默认为yes。

还有几个属性是用在HTA中的,在一般的网页中一般不使用。
    dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。
    edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。
    unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。

传入参数:
    要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:

test1.htm
<script>
  var mxh1 = new Array("mxh","net_lover","孟子E章")
  var mxh2 = window.open("about:blank","window_mxh")
  // 向对话框传递数组
  window.showModalDialog("test2.htm",mxh1)
  // 向对话框传递window对象
  window.showModalDialog("test3.htm",mxh2)
</script>test2.htm
<script>
  var a = window.dialogArguments
  alert("您传递的参数为:" + a)
</script>
test3.htm
<script>
  var a = window.dialogArguments
  alert("您传递的参数为window对象,名称:" + a.name)
</script>
可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如:

test4.htm
<script>
  var a = window.showModalDialog("test5.htm")
  for(i=0;i<a.length;i++) alert(a[i])
</script>test5.htm
<script>
function sendTo()
{
  var a=new Array("a","b")
  window.returnValue = a
  window.close()
}
</script>
<body>
<form>
  <input value="返回" type=button onclick="sendTo()">
</form>
常见问题:
1,如何在模态对话框中进行提交而不新开窗口?
   如果你 的 浏览器是IE5.5+,可以在对话框中使用带name属性的iframe,提交时可以制定target为该iframe的name。对于IE4+,你可以用高度为0的frame来作。例如:

test6.htm
<script>
  window.showModalDialog("test7.htm")
</script> test7.htm
if(window.location.search) alert(window.location.search)
<frameset rows="0,*">
  <frame src="about:blank">
  <frame src="test8.htm">
</frameset> test8.htm
<form target="_self" method="get">
<input name=txt value="test">
<input type=submit>
</form>
<script>
if(window.location.search) alert(window.location.search)
</script>
分享到:
评论

相关推荐

    非常好用的js弹框

    "非常好的js弹框"这个资源显然聚焦于JS实现的对话框功能,这是网页交互中不可或缺的一部分,用于提示用户信息、确认操作或者获取用户输入。下面将详细介绍JS弹框的相关知识点,并结合提供的文件名进行解析。 1. **...

    JS锁屏弹框代码,可以自定义弹框透明度,自定义弹框时间长,自定义弹框内容

    3. **JavaScript逻辑**:接下来,我们需要编写JS代码来控制弹框的显示和消失。可以使用`setTimeout`函数来设置弹框显示的时间长度。 ```javascript function showLockScreen(content, duration) { var lockScreen ...

    javascript弹框控件

    JavaScript弹框控件是网页开发中的一个重要组成部分,它允许开发者以更加美观和交互性更强的方式向用户展示信息或获取用户输入。传统的JavaScript弹框如`alert()`、`prompt()`和`confirm()`虽然功能简单,但在现代...

    【JavaScript源代码】vue自定义弹框效果(确认框、提示框).docx

    在Vue.js中,自定义弹框效果是一种常见的需求,它能够提供更加灵活的用户体验和界面交互。本实例展示了如何在Vue项目中实现一个自定义的弹框组件,该组件可以根据传入的`type`参数来区分是确认框还是提示框。 首先...

    js弹框封装

    在JavaScript的世界里,弹框是一种常见的用户交互方式,用于显示警告、询问、确认或提供信息。"js弹框封装"是指将多种弹框功能进行模块化处理,方便开发者在项目中快速、统一地调用。这里我们将深入探讨“zDialog v...

    js弹框及div布局的一个小综合

    在JavaScript(JS)和网页设计中,"js弹框及div布局的一个小综合" 主题涵盖了两个关键概念:JavaScript的弹窗(对话框)和基于div的页面布局。这两个技术对于创建交互式和动态的网页至关重要。在此,我们将深入探讨...

    弹框artDialog

    ArtDialog是一款优秀的JavaScript弹框插件,以其丰富的功能和良好的可定制性受到开发者青睐。本篇将详细介绍ArtDialog的使用方法、功能特性以及如何实现各种弹窗样式。 ### 1. ArtDialog简介 ArtDialog是一款基于...

    通过js实现了延迟弹框效果,特此分享一下!

    在JavaScript编程中,延迟弹框效果通常是指使用定时器(setTimeout)来控制弹出警告、确认或自定义对话框的时间。这种技术常用于用户交互,比如加载数据后提示信息,或者防止用户连续快速操作时频繁弹出对话框。本文...

    简单实用的弹框加遮罩和关闭按钮.zip

    在网页设计中,弹框和遮罩层是常见的交互元素,用于向用户显示重要的信息、提示或确认操作。本文将详细解析"简单实用的弹框加遮罩和关闭按钮"的实现方法,以及如何利用JavaScript(jq)进行扩展和自定义。 首先,...

    jquery 弹框插件使用

    artDialog是一款基于jQuery的对话框插件,它提供了一套完整的对话框解决方案,包括警告、确认、提示、信息等多种类型的弹框,并支持自定义样式和内容,使得开发者能够创建出符合项目需求的个性化弹框。 在使用...

    非常棒一jquery弹框插件

    弹框分为多种类型,如警告弹框、确认弹框、模态对话框和非模态对话框等。这些弹框设计的目的在于不打断用户的主要操作流程,而是提供额外的信息或者功能选项。 jQuery弹框插件利用jQuery的灵活性和高效性,创建出...

    手机端提示弹框与确认框

    `alert` 和 `confirm` 是两个基本的JavaScript原生方法,用于显示单击确定按钮关闭的警告信息和需要用户确认的对话框。在描述中,`.msgBox.alert("www")` 会显示一个简单的警告弹框,内容为 "www",而 `.msgBox....

    弹框列表.rar

    1. **弹框(Dialog Box)**:在图形用户界面(GUI)中,弹框是一种临时窗口,它会出现在当前活动窗口之上,要求用户进行输入或确认信息。在NC中,这个弹框是一个功能性的元素,用于展示和选择单据模板。 2. **单据...

    js 弹框效果

    "js 弹框效果"这个主题聚焦于如何利用JavaScript来实现动态的弹出窗口,为用户提供更加丰富的交互体验。模态窗口(Modal Window)是网页设计中常用的一种元素,它可以在用户操作主页面的同时强制用户关注特定信息...

    【JavaScript源代码】js实现弹框效果.docx

    在Web开发中,弹框是非常常见的交互设计之一,它可以用来提醒用户、展示重要信息或者进行表单提交确认等操作。传统的JavaScript中,我们可以使用`alert()`、`confirm()`等内置方法快速创建弹框,但这些内置方法功能...

    弹框 遮罩层 alert提示 样式

    jDialog通常提供更丰富的功能和更美观的样式,相比原生的JavaScript弹框函数,它允许开发者自定义弹框的大小、位置、颜色、按钮等属性,甚至可以添加复杂的交互逻辑。 总的来说,弹框、遮罩层和alert提示在网页开发...

    网页弹框所需js

    网页弹框是网页交互中常用的一种功能,常用于通知、提示或者用户确认操作。JavaScript(简称js)作为浏览器端的主要脚本语言,是实现网页动态效果和交互的核心工具。在这个主题中,我们将深入探讨如何利用JavaScript...

    简易弹框示例--适用于定制化样式弹框

    在网页开发中,弹框是常见的一种用户交互元素,用于显示警告、确认或者获取用户输入。传统的`alert`和`confirm`弹框虽然简单易用,但它们的样式固定,无法满足现代网页设计中对定制化样式的追求。这篇内容将深入探讨...

    jQuery弹框

    2. **编写CSS样式**:设计弹框的外观,包括尺寸、位置、背景色、边框等。 3. **编写jQuery脚本**:添加事件监听器,响应用户操作,如点击按钮时显示或隐藏弹框,处理用户输入等。 4. **集成到项目**:将弹框代码引入...

    超逼真的仿腾讯预警消息弹框效果

    实现这样的弹框效果可能还会涉及到JavaScript,用于控制弹框的显示、隐藏、动画效果以及与用户的交互。例如,用户点击关闭按钮时,弹框应优雅地淡出;或者当用户尝试离开页面时,弹框会出现在视野中,提醒他们有未...

Global site tag (gtag.js) - Google Analytics