如何在单击按钮时显示fancybox（示例）答案

【问题标题】：How can I show fancybox on click of a button (Example)如何在单击按钮时显示fancybox（示例）
【发布时间】：2012-09-20 20:26:38
【问题描述】：

我有一个 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>

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

提前致谢

【问题讨论】：

我不是专业的 ASP 开发人员，但是一旦元素被渲染为页面，您就可以在 jQuery 提供的 $(document).ready 函数中将其作为 HTML 元素引用，然后我们可以调用$('.fancybox').fancybox()
对不起，我尝试了但不起作用，谢谢您的回复

标签： c# jquery asp.net fancybox code-behind

【解决方案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/

【讨论】：

我添加了我所做的示例代码，请查看代码您可以从代码中理解我的问题

【解决方案2】：

确保您的

中有 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 内部）确保你连接了 fancybox，如下所示：

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
</script>

【讨论】：

我添加了我所做的示例代码，请查看代码您可以从代码中理解我的问题

【解决方案3】：

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

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

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

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

$("#newOpen").bind("click", function(){
 $(".fancybox").trigger("click");
});

【讨论】：

是的，您理解正确，但使用 asp 按钮，但我现在尝试它不起作用.....感谢您的回复