Question

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

经过一番研究后，我发现了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

提前致谢

Answer 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/

Answer 2

确保您的＆lt;中有JQuery的脚本标记。头＆gt;像这样：

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

同样在头部，引用脚本文件本身，以及这样的样式表（假设您已将文件复制到therootofyourwebsite / 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>

然后，在＆lt;的底部。身体＆gt; （但仍然在体内）确保你连接fancybox，如下所示：

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

Answer 3

如果我理解正确，您想从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");
});

如何在点击按钮时显示fancybox（示例）

3 个答案: