jQuery Login modal popup for ASP.NET 2.o Page

Question

I have an ASP.NET web page(Not MVC ) (HomePage.aspx) and another page (PRiceList.aspx).I have a login feature in my Home page.So when a user logged in the site, They can go to the pricelist.aspx page easily using a link in homepage.If some one is entering the page with out logging in , I want to show a modal login box (background disabled) to login . I saw this in jqueryui site.Can any one tell me how to impement this in my site ? Is there any security problem in this since i am using the javascript to send the user credentials to the site when using this method (I am not sure) . Please advice. Thanks in advance

Answer 1

jQuery Modal Form Dialog is your way to go here. I made a test app doing what you wanted with it and it worked well.

Markup for your ASPX page:

<div id="dialog" title="Please Login">
        <asp:Login ID="login" runat="server" />
</div>

Javascript needed for the page:

$(document).ready(function() {
$("#dialog").dialog({
    bgiframe: true,
    autoOpen: false,
    height: 300,
    modal: true,
    buttons: {
        Cancel: function() {
            $(this).dialog("close");
        }
    },
    close: function() {
        allFields.val("").removeClass("ui-state-error");
    }
});

var isAuthenticated = $("#isAuthenticated").val();
if (isAuthenticated && isAuthenticated == "false") {
    // Display the modal dialog.
    $("#dialog").dialog("open");
}});

Code behind I used on the aspx page:

ClientScript.RegisterHiddenField("isAuthenticated", "false");

You would give it true or false, depending on if the user was authenticated, so the javascript would know to display the login or not.

Now about the security. The login wouldn't be done by the javascript because the user would hit the button on that login page and it would post back to the server like normal. If you wanted to use ajax, you would have to check out the jQuery $.ajax method.

Answer 2

Use a jquery dialog:

http://jqueryui.com/demos/dialog

This needs you to add the modal back to the DOM too.

jQuery(".loginPanel").each(function() 
{ 
   var popup = jQuery(this); 
   popup.parent().appendTo(jQuery("form:first")); 
});