回发后使用fancybox

时间:2014-08-21 11:43:05

标签: jquery asp.net fancybox

昨天我在C#asp.net开发网页时开始使用fancybox插件,我成功地用它来显示隐藏的面板,图像等。

但今天我想在回发之后将它用于不同的案例。

我有一些在页面加载时动态创建的链接按钮。每个按钮单击更改隐藏面板的内容 - 例如标签的文本。我想在fancybox中显示已更改的面板,但我真的不知道如何。

我只是想说我搜索了几个小时的解决方案,但我找不到与我的问题相符的解决方案。

我可能做错了吗? 我很乐意学习。

感谢。

修改

我的HTML文档包括:

<asp:Panel ID="Panel1" runat="server">   
</asp:Panel>

<div style="display:none">
    <div id="data">
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </div>
</div>

Panel1将成为动态按钮的父级。 data div是其内容必须在fancybox中显示的div。

背后的代码:

protected void Page_Load(object sender, EventArgs e)
{
    for (int i = 1; i <= 4; i++)
    {
        LinkButton but = new LinkButton() { ID = "LinkButton" + i.ToString(), Text=i.ToString(), CssClass="fancybutton" };
        but.Font.Size = 100;
        but.Click += new EventHandler(ButtonClick);
        Panel1.Controls.Add(but);
    }
}

protected void ButtonClick(object sender, EventArgs e)
{
    string id = (sender as LinkButton).ID;
    Label1.Text = id;

    Response.Write(Label1.Text); // test in purpose to see the label text's change
}

我的jquery:

        $(".fancybutton").click(function () {
            $.fancybox({
                'type': 'inline',
                'content': '#data'
            });
        });

看起来fancybox会出现一秒钟,但由于回发页面被刷新,fancybox会消失。

1 个答案:

答案 0 :(得分:1)

试试这个: 正如你所说,你的花哨的盒子出现了一秒左右,然后由于页面刷新它隐藏..

$(".fancybutton").click(function (event) {
    event.preventDefault();  // If this does not work also try "event.stopPropagation();"
    $.fancybox({
        'type': 'inline',
        'content': '#data'
    });
});

我希望这对你有用,因为我已经回答了你从你的问题中理解的内容。如果这对您有用,请告诉我。欢呼声。