call popup panel on page load in asp.net code behind using jquery control

Question

I would like to show the modal window (executed in the JavaScript function below) on page load:

<script type="text/javascript">

$(function () {    
    $('.popup-wrapper').modalPopLite({
        openButton: '.clicker', 
        closeButton: '#close-btn', 
        isModal: true 
    });    
});

</script>

<asp:HyperLink ID="clic" Text="ck" runat="server" CssClass="clicker" NavigateUrl="#">
</asp:HyperLink>

<asp:Panel ID="cli" runat="server" CssClass="popup-wrapper" Width="500" Height="500" >  
    <a href="#" id="A1">Close</a>    
</asp:Panel>

How do I do this in asp.net?

i want to show it on page load <script type="text/javascript"> $(function () { $('.popup-wrapper').modalPopLite({ openButton: '.clicker', closeButton: '#close-btn', isModal: true }); }); </script> <asp:HyperLink ID="clic" Text="ck" runat="server" CssClass="clicker" NavigateUrl="#"></asp:HyperLink> <asp:Panel ID="cli" runat="server" CssClass="popup-wrapper" Width="500" Height="500" > <a href="#" id="A1">Close</a> </asp:Panel> now it is connected with link tell me any updation so i can call it on page load event in asp.net — user3201772
– user3201772, Commented Feb 1, 2014 at 5:56
it is connteced with hyper link but i want to call it on page load on code behind pageload event — user3201772
– user3201772, Commented Feb 1, 2014 at 5:58
might this link will helps you stackoverflow.com/questions/19111890/… — Chirag
– Chirag, Commented Feb 1, 2014 at 6:31
user3201772,it will be better if you post code from comments to question by editing your post — sp_m
– sp_m, Commented Feb 1, 2014 at 7:44

Dmitriy Khaykin · Accepted Answer · 2014-02-02 23:50:25Z

If you want it to show up on every page load, you can use JQuery .ready() function on the document object, which will execute this script when the DOM fully loads. Otherwise, what might be happening is you're executing the function before $('.popup-wrapper').modalPopLite() or whatever is initialized and getting a JavaScript error.

So you'd do this instead:

$(document).ready(function () {    
    $('.popup-wrapper').modalPopLite({
        openButton: '.clicker', 
        closeButton: '#close-btn', 
        isModal: true 
    });    
});

Now, if you want to only display this on the first page load, and not on any further postbacks, you'll need to tap into C# codebehind:

public partial class SomePage : Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            // The @ character denotes a string literal; just makes it easy to 
            // use multiple lines in this case and keep the inline javascript 
            // code looking nicely formatted within C#

            ClientScript.RegisterStartupScript(this.GetType(), "PopModal", @"
                $(document).ready(function () {    
                    $('.popup-wrapper').modalPopLite({
                        openButton: '.clicker', 
                        closeButton: '#close-btn', 
                        isModal: true 
                    });    
                });"
            );
        }
    }
}

Collectives™ on Stack Overflow

call popup panel on page load in asp.net code behind using jquery control

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related