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

使用 jQuery 和 CSS 的弹出窗口

Rajin Sayeed S Alam
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.72/5 (12投票s)

2011 年 4 月 25 日

CPOL

3分钟阅读

viewsIcon

87322

downloadIcon

4341

在 Web 应用程序中显示弹出窗口的简单方法。

Snapshot Bangladesh

引言

弹出窗口在 Windows 编程中非常常见。 如果要从程序发出消息，我们只需执行 MessageBox.Show("Hello!! Its working!")。 但在 Web 中呢？ 这并不容易！ 在 Web 编程时，我总是诅咒自己，问为什么没有 MessageBox.Show() 或任何对话框弹出窗口。 您可能会有一个想法，例如 javascript:window.alert()。 但我确信它永远不会让你满意。

但是，借助 CSS 和 jQuery，可以找到一个不错的解决方案。 以下各节介绍了一种使弹出窗口显示在 Web 应用程序中的方法。

背景

由于该程序展示了使用 CSS 和 jQuery 的一种方法，因此如果您清楚了解 CSS 和 jQuery，将会有所帮助。 我们还将使用 ASP.NET MVC。 为了获得完整的画面，建议您查看以下链接

Using the Code

主要思路是，在 HTML 代码的主体中，将有一个 <div>，该 <div> 最初为空，但将像容器一样工作。 每当我想要弹出某些东西时，我都会将我的 HTML 代码放入该容器中并将其显示给用户。

下图显示了该过程的每个步骤； 这些步骤将在以下各节中进行描述。

初始化

首先，我们将 <div> 标记放在我们的 HTML 文件中，并给它一个名称，例如这里的 PopupDiv。 将 CSS 类与其关联

.Popup
{
    position: fixed;
    display: none;
    top: 20%;
    left:30%;
}

在上面的 CSS 代码中，我们根据 top 和 left 属性，将弹出容器设置为相对于浏览窗口的固定位置。

步骤 1：RequestPopUp

现在，在我们的主 HTML 文件中，我们放置一个按钮，该按钮将调用一个 JavaScript 函数。

function showPopup(id) {            
    $.get('<%= Url.Content("~/PopUp/GetPopUp") %>', { id: id }, setData);
}
  function setData(data) {
    // Logic using the html data
    ...
}

在此 JavaScript 函数中，将调用 PopUpController.GetPopUp() 操作方法的 GET 方法。 操作方法位于后端，使用 C# 代码。 操作方法执行其自身的逻辑并与模型通信，然后将部分视图返回给 JavaScript。 在 JavaScript GET 方法中，我们有一个 setData 函数，该函数捕获数据并为其弹出窗口执行其自身的逻辑，稍后将对此进行描述。

步骤 2、3：获取弹出数据

现在，上下文驻留在名为 PopUpController 的控制器中，位于其 GetPopUp() 操作中。

public ActionResult GetPopUp(int id)
{
   // Communication with the model
   ...
   ...
    return View("UserControl/PopupView"); // The defined View in the project
}

在控制器操作中，控制器与模型通信。 在这种情况下，BDInfoRepository 类对象返回其必要的信息。 控制器使用 ViewData 字典对象填充部分视图（用户控件）PopupView.ascx。 然后，它使用分配为 View HTML 的 data 参数自动调用 JavaScript setData 函数。

步骤 4、5：填充弹出容器并向用户显示

女士们先生们，我们正热切地等待 jQuery 代码的执行。 就在这里，正如罗伯特·兰登博士开始他的调查一样！！ 先前，控制器完成了它的工作，并将数据发送到 JavaScript。 现在 setData 掌握着古老的符号秘密

function setData(data) {
    // putting the data to the pop up div
    $("#PopupDiv").html(data);
    // viewing the div as block
    $("#PopupDiv").css("display","block");
}

首先，$("#PopupDiv").html(data); 语句使用模型提供的 HTML 数据填充我们喜爱的弹出容器。 但是等等！ 它仍然不可见。 因为我们没有使其可见，因为已分配 display:none;。 因此，让我们使用 jQuery 语句 $("#PopupDiv").css("display","block"); 来刺杀该属性，因为它将 CSS 修改为 display:block;。

现在，由于我们的包含弹出窗口的 div 显示为一个块，它将阻止其他控件，并且将显示为弹出窗口。

最后的润色

我们得到了我们想要的！！ 让我们去寻找另一场冒险吧！！ 但是等等。 我们被困在愚蠢的弹出窗口中。 我们需要退出弹出窗口。 我们应该使弹出窗口视图看起来像下面这样

// Customized Html
< button onclick="CloseWindow()">Close
function CloseWindow() {
    $("#PopupDiv").css("display", "none");
}

在这里，我们在单击关闭按钮时退出，并将弹出窗口恢复到其先前的状态。 因此，谜团得以解决。 我们又度过了一天，可以找到另一场冒险！

历史

  • 版本 1：2011 年 4 月 25 日。
© . All rights reserved.