帮酷LOGO
0 0 评论
文章标签:modal-popup  弹出  POP  Window  JAVA  modal  Javascript  

介绍

现在,JavaScript模式弹出窗口已经成为基于Web的应用程序的固有。 最近,我有一个需求,我需要使用模式弹出窗口。 我为它找到了很多基于Goggled的模式弹出 Windows,但是没有任何代码适合我的需求。

所以我决定在不使用JQuery的情况下创建我自己的模式弹出窗口,它应该易于使用并且灵活。

使用代码

首先,你需要在你的网页中包含 ModalPopupWindow.js 文件,如下所示:

<script src="JavaScript/ModalPopupWindow.js"type="text/javascript"></script>

一旦包含了JS文件,就需要创建一个 ModalPopUpWindow 实例。 为此,你需要编写 below 所提到的代码:

modalWin = new CreateModalPopUpObject();

modalWin 对象提供三个函数来创建三种类型的模态 Windows,其中提到了 below:

  • ShowMessage
  • ShowConfirmationMessage
  • ShowURL
衰减

当你想向用户显示一些信息时,可以使用 ShowMessage:

ShowMessage(message, height, width, title)

ShowMessage 函数采用四个参数:

  • Message: 你需要向用户显示的消息
  • Height: 消息窗口的高度
  • Width: 消息窗口的宽度
  • Title: 窗口的标题

调用的语法如下所示:

modalWin.ShowMessage('This Modal Popup Window using Javascript',200,400,'User Information');
ShowConfirmationMessage

ShowConfirmationMessage 窗口可以用于你要从用户那里确认的位置:

ShowConfirmationMessage(message, height,
 width, title, onCloseCallBack, firstButtonText, onFirstButtonClick, secondButtonText,
 onSecondButtonClick)

ShowConfirmationMessage 函数采用八个参数:

MessageHeightWidthTitle 参数已经被描述为 上面。

  • onCloseCallBack ( 可选): 在确认窗口关闭时调用的函数的NAME
  • firstButtonText: 需要在第一个按钮上显示的文本( 如是,同意,确定,等等 )
  • onFirstButtonClick: 将在单击第一个按钮时调用的函数的NAME。
  • secondButtonText: 需要在第二个按钮上显示的文本( 如是,同意,确定,等等 )
  • onSecondButtonClick: 在单击第二个按钮时调用的函数的NAME

调用的语法为 below:

modalWin.ShowConfirmationMessage('This
 Modal Popup Window using Javascript',200,400,'User Confirmation',
 null,'Agree',Action1,'Disagree',Action2);
ShowURL

当你想在模式弹出窗口中显示新的页面或者URL时,可以使用 ShowURL 函数。

ShowURL(url, height, width, title,
 onCloseCallBack, callbackFunctionArray)

HeightWidthTitleonCloseCallBack 已经被描述为 上面。

  • url: 网页的位置或者网址
  • callbackFunctionArray ( 可选): 使用这里参数,可以将父页函数的array 传递给子页面 inside 模式窗口。 使子页可以访问父页的函数。

调用的语法如下所示:

var callbackFunctionArray = new Array(EnrollNow,
EnrollLater);
modalWin.ShowURL('Child.htm',320,470,'User
Enrollment',null,callbackFunctionArray); 
SetButtonStyle

你可以使用函数 SetButtonStyle 更改按钮样式。 有时,你可能希望将按钮显示为链接,在这种情况下,你可以使用。 below 是一个将按钮显示为链接的示例。

SetButtonStyle(btnStyle)
  • btnStyle: 按分号分隔按钮的样式。 样式的命名约定应该像 JavaScript,而不是CSS样式。 例如在CSS中,我们使用" text-decoration"和 JavaScript,我们使用" textDecoration"。 因此,在传递使用JavaScript命名约定的样式时,请确保。

调用的语法为 below:

modalWin.SetButtonStyle("background:none;border:none;textDecoration:underline;cursor:pointer");
拖动窗口

默认情况下,ModalPopUpWindow 是可以拖动的,对于拖动窗口,你需要按下窗口标题栏并拖动。 如果你不希望窗口可以拖动,那么你可以使用 ModalPopUpWindowDraggable 属性。 你需要在每次调用 ModalPopUpWindow的任何显示函数之前设置这里属性,以使它的不能被拖动

指定窗口可以拖动的语法为 below:

modalWin.Draggable=false;
modalWin.ShowMessage('You can not drag this window',200,400,'User Information');
从模式弹出子窗口传递值到父窗口

有时我们可能需要将子模式窗口中的值传递给父窗口,而使用模式窗口的" ShowURL"函数。 在JavaScript中,我们可以使用 window.parent 来访问父窗口元素/函数。 因此我们可以使用相同的( window.parent ) 从子弹出窗口传递值到父窗口。 如果你要点击"显示URL窗口"按钮,点击将显示弹出窗口,当你点击"立即注册"按钮时,它将传递给父窗口的值,如图截图所示:

摘要

在附加的源代码中,你将找到这里提示中描述的所有场景的示例。 此外,你还可以根据你的需求修改源代码。

历史记录

  • 更新的源代码版本 v4,支持 20 -Nov-2013上的IE11


文章标签:JAVA  Javascript  Window  POP  弹出  modal  modal-popup  

Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语