How can I show fancybox on click of a button (Example)

c# jquery asp.net fancybox code-behind

11,640

To call javascript from Code Behind, you can do something like this in your button click event handler:

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

This javascript will be sent to the page and executed after the post-back is finished.

Edit: You can find more information here about invoking FancyBox through javascript. It basically requires you to simulate a click on a hidden button: http://thingsilearned.com/2010/01/27/dynamically-calling-fancybox-from-javascript/

11,640

Author by

Ahmed Hamdy

Updated on June 04, 2022

Comments

Ahmed Hamdy almost 2 years

I have a web application, and the requirements need to show jquery lightbox as a confirmation message including some information.

After some research I found fancybox FancyBox Jquery Light box

I followed this step by step till I could show the required confirmation message in a fancy box, which is triggered by <a href="#popup" class="fancybox">Open</a>

I need to trigger or show the fancy box from code behind of an asp:button

I've searched a lot and all results that I got when applied did not work.

Can any one please show me a sample about triggering fancybox from code behind of asp button in c# and attach it here?

that is a sample of my code:

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

This code is work correctly and show the fancybox after click on open link all my need is to show the fancybox after click on asp:button

Thanks in advance

Ahmed Hamdy over 11 years

i added a sample code of what i do, please see the code you can understand my problem from code
Ahmed Hamdy over 11 years

i added a sample code of what i do, please see the code you can understand my problem from code
Ahmed Hamdy over 11 years

yes you understand correctly but with asp button but i try it now not work ..... thanks for your response