65.9K
CodeProject 正在变化。 阅读更多。
Home

JavaScript 模态弹出窗口

Mahesh Bailwal
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.84/5 (45投票s)

2013 年 5 月 7 日

CPOL

3分钟阅读

viewsIcon

730865

downloadIcon

39568

灵活的 JavaScript 模态弹出窗口

引言

如今，JavaScript 模态弹出窗口已成为基于 Web 的应用程序的固有组成部分。 最近，我有一个需要使用模态弹出窗口的需求。 我在 Google 上搜索了一下，找到了许多基于 JQuery 的模态弹出窗口，但没有一个代码符合我的需求。

所以我决定创建自己的模态弹出窗口，无需使用 JQuery，它应该易于使用且灵活。

Using the Code

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

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

一旦您包含了 JS 文件，您需要创建 ModalPopUpWindow 的实例。 为此，您需要编写下面提到的代码

 modalWin = new CreateModalPopUpObject();

modalWin 对象提供了三个函数来创建三种类型的模态窗口，它们在下面提到

  • ShowMessage
  • ShowConfirmationMessage
  • ShowURL

ShowMessage

当您想向用户显示一些信息时，可以使用 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 函数接受八个参数

message, height, width, title 参数已经在上面描述过。

  • onCloseCallBack （可选）：在确认窗口关闭时将被调用的函数的名称
  • firstButtonText：需要在第一个按钮上显示的文本（如 Yes, Agree, OK 等）
  • onFirstButtonClick：在单击第一个按钮时将被调用的函数的名称。
  • secondButtonText：需要在第二个按钮上显示的文本（如 Yes, Agree, OK 等）
  • onSecondButtonClick：在单击第二个按钮时将被调用的函数的名称

调用的语法如下所示

 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)

height, width, title, onCloseCallBack 已经在上面描述过。

  • url：网页的位置或 URL
  • callbackFunctionArray （可选）：使用此参数，您可以将父页面的函数数组传递给模态窗口内的子页面。 这样子页面就可以访问父页面的函数。

调用的语法如下

var callbackFunctionArray = new Array(EnrollNow,
EnrollLater);

modalWin.ShowURL('Child.htm',320,470,'User
Enrollment',null,callbackFunctionArray);

SetButtonStyle

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

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

调用的语法如下所示

modalWin.SetButtonStyle("background:none;border:none;textDecoration:underline;cursor:pointer");

拖动窗口

默认情况下，ModalPopUpWindow 是可拖动的，要拖动窗口，您需要在窗口标题栏上按下鼠标并拖动。 如果您不希望窗口可拖动，那么您可以使用 ModalPopUpWindow 的 Draggable 属性。 每次在调用 ModalPopUpWindow 的任何 show 函数之前，您都需要设置此属性以使其不可拖动

使窗口不可拖动的语法如下

modalWin.Draggable=false;
modalWin.ShowMessage('You can not drag this window',200,400,'User Information');

从模态弹出子窗口向父窗口传递值

有时，在使用模态窗口的“ShowURL”函数时，我们可能需要将值从子模态窗口传递到父窗口。 在 JavaScript 中，我们可以使用 window.parent 来访问父窗口的元素/函数。 因此，我们可以使用相同的（window.parent）从子弹出窗口向父窗口传递值。 您可以在随附的演示代码中找到相同的示例，单击“Show URL Window”将显示弹出窗口，当您单击“Enroll Now”按钮时，它将把子窗口的值传递给父窗口，如下面的屏幕截图所示

摘要

在随附的源代码中，您将找到本技巧中描述的所有场景的示例。 除此之外，您可以根据您的需求修改源代码。

历史

  • 更新的源代码版本 v4，支持 IE11，于 2013 年 11 月 20 日发布
© . All rights reserved.