Question

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

首先需要此功能的是asp：向导控件上的导航按钮。当用户尝试前进时，我们会验证他们的产品选择，并可能会显示我们需要显示的消息。

为了测试，由于我是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：面板和标签，拼写的div的ID等等。

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

Page.ShowMessage("Hello lightbox!")

我想我可以在母版页文件中包含一些脚本和DIV。它会被隐藏，直到被调用。

但是，我需要能够：

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

b）我需要找到一种让UpdatePanel包含消息内容的方法。如果我可以执行一行更新隐藏的JavaScript或设置隐藏消息的内容DIV BEFORE 对showMessage（）的调用，我想我们会很高兴。

thickbox addin使用JQuery，Lightview使用原型和scriptalicous。 Lightview非常漂亮 - 更好的图像，动画等等。我真的不在乎它。

我正在使用.NET内置的AJAX（Atlas）框架。

Answer 1

迟到的答案，但也许不会太晚。我对你的问题感到困惑，我将回答这一部分：

我们真正想要的是能够   从后面的任何代码中调用它   一些时尚如：

Page.ShowMessage（“Hello lightbox！”）

让我们用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上查看此other question。该实现使用jqModal并且非常小（不需要客户端脚本）。

Answer 2

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

Answer 3

如果要控制何时使用endRequest显示消息，一种非常简单的方法是使用变量。将隐藏的输入字段设置为标志（应位于更新面板中，否则将不会更新）。然后，在ShowMessage函数中，始终读取隐藏输入的值。如果设置，则弹出Thickbox。否则，什么都不做。

至于项目b，你可以走相同的路线（但这可能会使视图中出现许多不必要的隐藏字段）。有关使用页面方法或Web服务的任何想法吗？互动更加灵活。

Answer 4

我遇到的问题是，使用jbox库投射灯箱可能会导致一些问题，因为某些地方存在冲突，灯箱无法正常加载。

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

Answer 5

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

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

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

不太了解ASP.NET，但我假设发送警报是默认情况下它会帮助你做的事情。这只会覆盖默认操作。

如何从ASP.NET AJAX响应中显示Lightbox对话框

5 个答案: