Comments

  1. Gonzalo says

    Nice post. One thing to add, though, is that you should always set the href attribute to an actual login page (as in href=”login.php” instead of “href=#”) in case the user doesn’t have JavaScript activated, or the login function would be rendered useless.

    I know that this may have not been done in the demo for practical purposes, but it’s worth noting, IMO.

    Regards,
    Gonzalo

  2. says

    nice work gabriel, most modal logins i’ve seen don’t use ajax to check login details, which isn’t great. i’m going to use this one- thanks!

    rob ganly

  3. Leland says

    How do I modify this form action to work as a login modal for wordpress. I feel like that would be a huge traffic driver if you wrote an addon tutorial to make a wordpress modal login box. I have wanted to implement that for a long time but have no ajax skills. Thanks.

  4. Phil says

    I would love to see this incorporated into wordpress. I’m looking for a way of having a modal box or something similar used for a login for a clients area I’m trying to setup.

  5. Manish says

    Can you please suggest examples using ASP .net instead of PHP itried to search a lot in net but recieved faiure to get the same jo as you did in PHP. Please help me to know how the same functiionality is achieved in asp .net

  6. Rex says

    Hi,

    Nice. But i don’t want the Modal Box launched when the user clicks on the “Login” link, i want it launched when the page loaded.

    Can anyone teach me how to do that?

    Or what should i edit this line:

    $(“#login_link”).click(function(){
    $(‘#login_form’).modal();
    });

    Thanks…

    • Gabriel C. says

      You should just remove the first and the last line:

      replace

      $(‘#login_link’).click(function(){
      $(‘#login_form’).modal();
      });

      with

      $(‘#login_form’).modal();

      • Rex says

        Hello Gabriel,

        Thanks a lot! It works. But i don’t want show the login form as soon as the page loaded, i want to show the login form after 10 seconds. Can you teach me how?

        Thanks…

        Rex

        • Gabriel C. says

          Replace the following line:

          $(’#login_form’).modal();

          with:

          setTimeout(“$(‘#login_form’).modal();”, 10000);

          Note: The timeout value is set in milliseconds. So, if you want to wait 5 seconds until the modal login launches just set the value to 5000.

  7. Rex says

    Hello Gabriel,

    I have a problem here. I removed the close button(X) at the upper left of my form, because i don’t want my users to see the content before they log in.

    I want the model window to close after they enter the correct password. I don’t want to redirect them to the private page.

    I try my best to edit the code below but cannot works. So i hope you can help. Thanks.

    In init.js, I just replace:

    setTimeout(‘go_to_private_page()’, 3000);

    to

    setTimeout(“$(‘a.modalCloseImg’).hide();”, 3000);

    Or replace here like:

    function go_to_private_page()
    {
    window.location = ‘private.php';
    }

    to

    function go_to_private_page()
    {
    ?
    }

    Thanks,

    Good day!

    Rex

  8. Gonzalo González Mora says

    Tuba,
    Yes, it can be done using local js libraries (by uploading it to your server). The external, Google-hosted library is used to get advantage of caching. You see, if someone has already visited a site which used the js from Google, it will be cached and it’s one less file to be downloading, improving download times and perceived speed by the user.

  9. expe1 says

    Hello Gabriel,

    Thanks you sooo much for this post. This is is great.

    This is (almost) exactly what I was looking for.

    Here is my case:

    here is what I have now:

    default.aspx
    login.aspx
    privatepage.aspx

    from default.aspx when a user clicks on privatepage.aspx, he/she gets redirected to login.aspx?page=privatepage.aspx
    then when the user enters the correct credentials, he/she gets redirected to privatepage.aspx

    I will need to replace $(‘#login_link’).click(function(){
    $(‘#login_form’).modal();
    });
    with
    $(‘#login_form’).modal();

    but my question is where should I put this code? in privatepage? or in login.aspx?

    I don’t (of course) want to have users see privatepage.aspx before they login.

    Also, the login page uses a usercontrol that sets the session objects (fname, lname, etc.)

    Please advise.

    Thanks

  10. Martyn Bristow says

    the PHP for the donload won’t work
    i had to make a whole host of changes

    a) the index.html should be login.php
    b) the variable anme in the PHP scripts should be set to the same not differnt variables on each page

    can someone check it and fix it please

  11. alex says

    Nice plugin but I have a small problem.

    on my local xampp it works very well.

    but if I uploaded it to my webspace the window.location redirect doesn’t work.

  12. waseem says

    hello Gabriel,
    Session is not set in the private.php

    Welcome, | Logout

    This is your private page. You can put specific content here.

    Note after Welcome,the username does not appear…
    I`l be kind enough if u reply

    • Gabriel C. says

      The session is set in config.php. This file is included in private.php.

      To fix the username bug just edit line 26 from do-login.php: change $username to $post_email (the username is actually the e-mail address in this case)

      The purpose of the tutorial is to show a working ajax login from inside a modal box. If you want to integrate it on your website, the PHP files from the ZIP package need some changes though. They were added just for demo purpose.

  13. Beth says

    I’m having a hard time making this work with asp pages (pre asp.net). What is the trick to send the form data? I try changing the php page to the asp equivalent using
    request.Form(“password”)
    instead of
    $_POST[‘password’]
    for example, but it’s not working. Any suggestions on where I can look for help on this?

    Thanks! I love your code otherwise – it’s exactly what I’ve been looking for.

  14. Prad says

    I am have a similar example but no login, but does post data in a similar way on a floating modal box.

    I am trying to retrieve json output, it doesn’t seem to work. On Firebug console something like $(‘#someid’).html(data.output); works.

    Any help?

  15. James Shidell says

    Hello,

    Gabriel great script thanks for sharing.

    Question, How can I go about configuring the PHP array? Right now the email and password are hard coded, which is fine but how do I add more email and passwords to the $config array?

    Thank you,
    v/r
    JShidell

  16. says

    Hi, This is a great script, been searching for something like this for a long time.

    I am looking to add this function on a new website I am developing, however, I have used Jquery Fancybox for the modal window. Is this script compatible with Fancybox?

    Thanks

  17. Carlos says

    Como hago para colgarlo en una web real, que cambios debo hacerle? Porque anda barbaro local en xampp pero lo cuelgo en la web y no pasa del login.

  18. Jose Bolivar says

    I found this and thought it’s great, thanks.

    I am currently testing it and I think there are a couple of glitches in the examples downloaded with the zip.

    -The php scripts use “isSet” instead of “isset” and breaks for me, had to change it.
    -The cookies are not being set, it fails cheking the post “remember_me”, the index.html is not sending any “remember_me” value. All the cookie use would need further modifications to work, $usr and $hash are never set to compare, but I know it wasn’t the point in the example to learn.
    -All the ‘username’ checks when failed redirect to login.php but there is no login.php there; logout.php too, leading to 404 error should be index.html.
    -In do-login.php username is given the value of variable $username, although $username is never given any value, this leads to failing login everytime.
    -Failing login redirects to login.php

    Hope this helps others that found this not working, happened to me, and correct me if i’m wrong.
    It works perfect in the view demo link though.

    • says

      Cheers for the heads up on this! I was wondering what I a was missing here.

      Gabriel, it would be great if you can change the download to be the working demo version, just to save a bit of time. Anyways a BIG thanks for showing me the ropes with this!

    • Gabriel C. says

      That success alert is just a dummy action. It could have been no action set since the data is sent to the PHP page through AJAX. It appears if the script isn’t setup correctly. Make sure you have the right paths to the JavaScript files, and the right ID is set for the link that is clicked (see the tutorial in detail).

  19. says

    Hi, thanks for such a great script.
    However, i have placed the “Login” link in a php loop that prints few rows from the database, and i want the modal box to appear when i click on link in each row.

    So far, i could not figure out how to achieve multiple modal boxes, but as Zomb said, he has figured it out, it would be great if someone helps me here :)

  20. says

    Yes, i think i have figured it out….
    you need to write another link for opening up the modal box, like:

    <a id="login_link2……
    <a id="login_link3……

    And in the init.js file, you need to add:

    $("#login_link2").click(function(){
    $('#login_form').modal();
    });

    $("#login_link3").click(function(){
    $('#login_form').modal();
    });
    ………

    Hope iam right….

    • says

      Or use classes instead of ids. I just used changed to <a class="login_link" and in the init.js file $("login_link").click(function() {… and it seemed to do the trick!

  21. rashidul says

    Hi,

    I have implement this. When successfully logged in then not redirect to private.php… It just echo OK… I have not implemented cookie.

    thanks

  22. says

    I came across your code snippets from google..I tried the code, and the submission works great-problem is..the password field when serialized is visible through firebug…Its actually not a grave problem..because even with a form post, the same request can be intercepted and the form contents can be checked..

  23. Gosain says

    In case the form has more fields, instead of defining width height manually in CSS, can we have the Login box take the maximum height or auto height may be?

  24. says

    I would like to implement this on a site I’m building for a friend. They want to be able to log into a third party site that manages their inventory. They have dozens of user ids, so putting the login credentials in so-login.php won’t work. If this were a simple html form, I’d just set the action to the appropriate cgi login path and their server takes care of the login authorization. Is that possible with your login modal…to simply direct the action to third party log in?

  25. Alex says

    fine tutorial!
    it works great! if u check other tutorials, you can finde online, you go crazy! some of them are really bad und impossible to understand.

    but what about security issue? how secure is such a ajax/jquery login?

  26. Pato de Borracha says

    I use:

    in top of code and not work Modal!
    if i change it for:

    Not Work my Page :(

    How i do?

  27. Lauren says

    Will this work for a secure login? DO modals and pop ups defer from having a secure login? Is it worth it to redirect to a new sign in page rather than doing this method for security reasons?

  28. andy says

    Hi Gabriel,

    Great work!

    I have a small problem. When user clicks on X (close) image button – i wan’t the page to be redirected to home page. How can i set the close button to redirect to home page instead of just hiding the modal login box.

    Thanks

  29. ahmed says

    I really like the idea behind Modal window and i know how its useful.

    But all Modal Window and other similarity are triggered after CLICK event. I have to click on SPECIFIC ID to get Modal Window shows up.

    What i’m looking for to have simple Modal Window build by jQuery and it get triggered when user select any text from web page (plain text from P or SPAN tag). And when Modal Window open up it has some data or links or some tabs inside that Modal Window each tab has its own data such as forms or links, images, audio, video, ….etc

    I hope i’m clear and explained myself enough. Im still new to jQuery and searching a lot for such solution or close solution to my idea, but i cant.

    I’ll be so grateful of you can guide me or show how and where to start. Or is it really possible to that.

    Thanks a lot
    Ahmed

  30. ryan says

    Hey I love this thing, but I’m having some issues with the declaration in MSIE. It seems that if I use a standard doctype, like just , the jquery modal script breaks. Is there some fix to the jquery function I can apply so I can use normal doctypes with this thing?

  31. jeff says

    Great, great login! After banging my head and searching for days, I can’t seem to figure out why the validation will not carry all the way through and therefore I am being redirected back to the login page. My backend programming is weak, but I have found that it may be an issue w/ the session or cookie….could someone please post the fix for this? Thank you!

  32. Sergio Paiva says

    I have a problem. After login this is redirect to login.php that doesn’t exists. I saw in the code that is caused because this line in do-login.php:

    $_SESSION[‘username’] = $username;

    The variable $username has no value.

  33. lance says

    There is a problem with the downloadable demo.

    You can fix it by changing the line
    $_SESSION[‘username’] = $username;

    in do-login.php…. to

    $_SESSION[‘username’] = $post_email;

    the problem was that $username was not being set, so in private.php all users were redirected back to index.html

  34. Isaac says

    Thanks alot for your script. It has really help me. I however have a challenge passing a variable from php to the init.js file. This is just what i want to accomplish

    function go_to_private_page()
    {
    window.location = ‘main.php?test=(a php variable HERE)';
    }

    Please help me out.

    Regards

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *