2

我想在我们的网站上使用Thickbox（或其中一种）来显示从服务器返回的信息消息。示例包括从 biz 逻辑返回的警告消息等。

需要此功能的第一个地方是 asp:wizard 控件上的导航按钮。当用户尝试继续前进时，我们会验证他们的产品选择，并且可能会有我们需要显示的消息。

对于测试，由于我是 JQuery 和 Thickbox 的新手，我创建了一个测试页面。相关部分如下：

<asp:Panel runat="server" ID="pnl" Visible="false" style="display:none;background-color:Black;">
<div style="background-color:Black; width=300; height=200; ">
    <asp:Label runat="server" ID="lblMessage" ForeColor="White" />

    <script language="javascript" type="text/javascript">

        function showMessage()
        {
            tb_show("Message", "#TB_inline?height=200&width=300&inlineId=<%# me.pnl.ClientID %>", null);
        }

        $(document).ready(function() { showMessage(); });

    </script>
</div>

目前，我让Thickbox 在IE7 中显示，但它翻了一番。我将两个垂直的厚盒堆叠在一起，都有标题和关闭按钮，只有最上面的一个有我的内容。

在 Chrome 中，窗口的背景是灰色的，但没有可见的厚框窗口。

当我将整个内容包装在 AJAX UpdatePanel 中时，我什么也得不到。

我究竟做错了什么？

好的，所以更多信息。我已经得到了Thickbox 和另一个名为LightView 的工作。以下脚本块在页面中是静态的（Thickbox 版本）：

<script type="text/javascript" language="javascript">
        function showMessage(sender, args)
        {
            tb_show("Message", "#TB_inline?height=200&width=300&inlineId=ctl00_ctl00_cph1_cphMain_pnl", null);

     }
     function StartWatch() {
         var prm = Sys.WebForms.PageRequestManager.getInstance();
         prm.add_endRequest(showMessage);
     }

回发设置标签的文本，该文本位于对 tb_show 的调用中指定的 div 内。我知道在回发触发之前需要调用 prm.add_endRequest 调用。

有几个问题。首先，这其中有太多是硬连线的——页面中的 asp:panel 和标签、拼写出的 div 的 ID 等等。

我们真正想要的是能够以某种方式从后面的任何代码中调用它，例如：

Page.ShowMessage("Hello lightbox!")

我想我可以在母版页文件中包含一些脚本和一个 DIV。在被调用之前它将被隐藏。

但是，我需要能够：

a) 控制何时发生。并不是每个 AJAX 请求（事实上，大多数都不需要）在返回时都需要显示一条消息。因此，我要么不必调用 endRequest 方法，要么让 endRequest 方法检查从 AJAX 调用返回的内容以确定它是否真的需要调用 showMessage()。

b) 我需要找到一种方法让 UpdatePanel 包含消息中的某些内容。如果我可以在调用 showMessage()之前执行一行 JavaScript 来更新隐藏消息或设置隐藏消息 DIV 的内容，我想我们会很高兴。

厚盒插件使用 JQuery，Lightview 使用原型和脚本。Lightview 更漂亮——更好的图像、动画等。我真的不在乎哪个。

我正在使用 .NET 中内置的 AJAX (Atlas) 框架。

4

5 回答 5

1

迟到的答案，但也许还不算太晚。我对你的问题有点困惑，我将回答这部分：

我们真正想要的是能够以某种方式从后面的任何代码中调用它，例如：

Page.ShowMessage("你好灯箱！")

让我们用Thickbox 和jQuery 来做，这是我所熟悉的，但这会给你一个用Lightview 重现它的总体思路。首先，您需要一个客户端脚本来转换“Hello lightbox！”。将消息转换为 html 元素，然后将其用作带有 TB 的内联内容。为此，我们将创建一个 id 为 myTBInline 的 div：

function showMessage(message)
{
    var divId = "myTBInline"; // You can change this id...

    var div = $("#" + divId); // try to retrieve the div if it exists

    if (div.length > 0) // if div already exists (previous call)
        div.empty();    // then remove its content
    else
        div = $('<div id="' + divId + '"/>'); // else create it

    // add the message to the div
    div.append(message);

    // display Thickbox using the div as inline element
    tb_show("Message", "#TB_inline?height=200&width=300&inlineId=" + divId, null);
}

这是困难的部分。现在是简单的部分，能够从后面的代码中调用它。您必须添加一个方法，因为它可以是静态/共享的。我通常使用 C#，但我会尝试为您使用 VB 语法编写它（我上次使用 VB.Net 是在 2005 年；）

Public Shared Class Thickbox
    Public Shared Sub ShowMessage(Type type, string message)
        Dim script as String = "showMessage('" + message.Replace("'", "\'") + "');";
        ClientScriptManager.RegisterStartupScript(type, "Thickbox", script, true);
    End Sub
End Class

干得好。在您的页面中，您可以通过以下方式使用该方法：

Thickbox.ShowMessage(GetType(), "Hello Thickbox!");

查看关于 SO 的其他问题。该实现使用 jqModal 并且非常小（不需要客户端脚本）。

于 2009-03-24T18:52:57.257 回答
0

If you want to control when the message is displayed with endRequest, one really simple method is to use a variable. Set a hidden input field as a flag (should be in the update panel as otherwise it would not be updated). Then, in your ShowMessage function, always read the value of the hidden input. If set, then popup the Thickbox. Else, do nothing.

As for the item b, you could go the same route (but this might just pepper the view with lots of unnecessary hidden fields). Any thoughts of using page methods or web services? It's lot more flexible for interaction.

于 2009-03-24T02:56:35.900 回答
0

我经常遇到的一件事是，当您从 AJAX 请求返回 javascript 时，出于安全原因，默认情况下它不会执行，您必须在 ajax 请求中启用它。很抱歉很痛苦，但我只知道 Prototype 中的设置，而不是 Asp.Net AJAX - 但至少需要检查一下吗？

于 2009-03-10T05:16:54.683 回答
0

我有一个问题，即在 jQuery 库中使用灯箱可能会导致一些问题，其中灯箱由于某处发生冲突而无法正确加载。

我发现的方法是使用 jQuery 版本的灯箱。 http://plugins.jquery.com/project/jquerylightbox_bal。

于 2009-03-25T11:15:46.817 回答
0

另一种方法是用您选择的模态覆盖 JS 的内置alert()和confirm()函数（而不是显示您可能认为的浏览器默认模态）。

http://dev.iceburg.net/jquery/jqModal/#examples并向下滚动到“覆盖”以获取示例。您可以在此页面上的 firebug 控制台中尝试一下。跑：alert('zomg!');在那儿。

function alert(msg) {
  //your modal js here.
}

对 ASP.NET 了解不多，但我假设发送警报是默认情况下会帮助您完成的事情。这只会覆盖默认操作。

于 2009-05-24T06:36:42.207 回答