2

我有一个 Web 应用程序，并且要求需要将 jquery 灯箱显示为包含一些信息的确认消息。

经过一番研究，我发现了 fancybox FancyBox Jquery Light box

我一步一步地按照这个步骤，直到我可以在一个花哨的框中显示所需的确认消息，这是由<a href="#popup" class="fancybox">Open</a>

我需要从 asp:button 后面的代码中触发或显示花哨的框

我进行了很多搜索，但应用时得到的所有结果均无效。

谁能给我看一个关于从c#中asp按钮后面的代码触发fancybox的示例并将其附在此处？

这是我的代码示例：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery   /1.7/jquery.min.js"></script>
<link rel="stylesheet" href="/source/jquery.fancybox.css?v=2.1.0" type="text/css" media="screen" />
<script type="text/javascript" src="/source/jquery.fancybox.pack.js?v=2.1.0"></script>

<script type="text/javascript">
$(".fancybox").fancybox({
    openEffect: 'none',
    closeEffect: 'none',
    afterLoad: function () {
        this.content = this.content.html();
    }
});
</script>


<body>
<form id="form1" runat="server">
    <a href="#test" class="fancybox">Open</a>

    <div id="test" style="display:none;width:300px;">
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <input id="Hello" type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <input id="Button1" type="button" value="Press Here" />            
            </td>
        </tr>
    </table>
    </div>
</form>
</body>

此代码工作正常，并在单击打开链接后显示 fancybox 我只需要在单击 asp:button 后显示 fancybox

提前致谢

4

3 回答 3

1

要从 Code Behind 调用 javascript，您可以在按钮单击事件处理程序中执行以下操作：

ClientScript.RegisterStartupScript(this.GetType(), "fancyBoxScript", "[JAVASCRIPT TO INVOKE FANCYBOX]", true);

这个 javascript 将被发送到页面并在回发完成后执行。

编辑：您可以在此处找到有关通过 javascript 调用 FancyBox 的更多信息。它基本上要求您模拟单击隐藏按钮：http ://thingsilearned.com/2010/01/27/dynamically-calling-fancybox-from-javascript/

于 2012-09-29T00:01:00.723 回答
0

确保在 <head> 中有 JQuery 的脚本标记，如下所示：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

同样在头部，引用脚本文件本身，以及这样的样式表（假设您已将文件复制到您的网站/fancybox/source 的根目录）：

<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.0" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.0"></script>

然后，在你的 <body> 底部（但仍然在 body 内部）确保你连接了 fancybox，如下所示：

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
</script>
于 2012-09-28T23:57:20.470 回答
0

如果我理解正确，您想从html如下按钮启动 fancybox：

<button id="newOpen" type="button">open fancybox from button</button>

....这里重要的是渲染html按钮，通过asp或任何其他编程语言。另请注意，这button 不是表单的一部分（在 fancybox 中打开）

如果上面是正确的，因为你已经有了从open链接启动 fancybox 的代码，那么只需添加这段 jQuery 代码：

$("#newOpen").bind("click", function(){
 $(".fancybox").trigger("click");
});
于 2012-09-29T18:52:18.157 回答