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 回答