Login Box Modal Dialog Window with CSS and jQuery

September 20, 2011

Hello guys, in this tutorial will introduce how to create a simple modal dialog window with jQuery by using of a login box. This tutorial requires intermediate knowledge of CSS and jQuery. For best results, please be sure to learn the basic of JQuery.

HTML

The markup is simple and also very versatile, in addition to make a login box, you can create content that is displayed only by clicking the link, use this tutorial to release all your creativity.

<a href="#login-box" class="login-window">Login / Sign In</a>

Now create a contact form and add the close button

<div id="login-box" class="login-popup">
<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
  <form method="post" class="signin" action="#">
        <fieldset class="textbox">
        <label class="username">
        <span>Username or email</span>
        <input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username">
        </label>
        <label class="password">
        <span>Password</span>
        <input id="password" name="password" value="" type="password" placeholder="Password">
        </label>
        <button class="submit button" type="button">Sign in</button>
        <p>
        <a class="forgot" href="#">Forgot your password?</a>
        </p>        
        </fieldset>
  </form>
</div>

CSS

The CSS might be a bit more complicated, but look you have any comments you explain in more detail this process. In this example i used the CSS3 rules.

/* Mask for background, by default is not display */
#mask {
    display: none;
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    z-index: 999;
}

/* You can customize to your needs  */
.login-popup {
    display: none;
    background: #333;
    padding: 10px;
    border: 2px solid #ddd;
    float: left;
    font-size: 1.2em;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99999;
    box-shadow: 0px 0px 20px #999;
    /* CSS3 */
        -moz-box-shadow: 0px 0px 20px #999;
    /* Firefox */
        -webkit-box-shadow: 0px 0px 20px #999;
    /* Safari, Chrome */
	border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px;
    /* Firefox */
        -webkit-border-radius: 3px;
    /* Safari, Chrome */;
}

img.btn_close {
    Position the close button
	float: right;
    margin: -28px -28px 0 0;
}

fieldset {
    border: none;
}

form.signin .textbox label {
    display: block;
    padding-bottom: 7px;
}

form.signin .textbox span {
    display: block;
}

form.signin p, form.signin span {
    color: #999;
    font-size: 11px;
    line-height: 18px;
}

form.signin .textbox input {
    background: #666666;
    border-bottom: 1px solid #333;
    border-left: 1px solid #000;
    border-right: 1px solid #333;
    border-top: 1px solid #000;
    color: #fff;
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    font: 13px Arial, Helvetica, sans-serif;
    padding: 6px 6px 4px;
    width: 200px;
}

form.signin input:-moz-placeholder {
    color: #bbb;
    text-shadow: 0 0 2px #000;
}

form.signin input::-webkit-input-placeholder {
    color: #bbb;
    text-shadow: 0 0 2px #000;
}

.button {
    background: -moz-linear-gradient(center top, #f3f3f3, #dddddd);
    background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#dddddd));
    background: -o-linear-gradient(top, #f3f3f3, #dddddd);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd');
    border-color: #000;
    border-width: 1px;
    border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    color: #333;
    cursor: pointer;
    display: inline-block;
    padding: 6px 6px 4px;
    margin-top: 10px;
    font: 12px;
    width: 214px;
}

.button:hover {
    background: #ddd;
}

jQuery

The first step is to call the jQuery file.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

Create a new script tag and insert the code.

$(document).ready(function() {
$('a.login-window').click(function() {
    
            //Getting the variable's value from a link 
    var loginBox = $(this).attr('href');

    //Fade in the Popup
    $(loginBox).fadeIn(300);
    
    //Set the center alignment padding + border see css style
    var popMargTop = ($(loginBox).height() + 24) / 2; 
    var popMargLeft = ($(loginBox).width() + 24) / 2; 
    
    $(loginBox).css({ 
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });
    
    // Add the mask to body
    $('body').append('<div id="mask"></div>');
    $('#mask').fadeIn(300);
    
    return false;
});

// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() { 
  $('#mask , .login-popup').fadeOut(300 , function() {
    $('#mask').remove();  
}); 
return false;
});
});

The Logic

  1. .append
    The .append() method inserts the specified content as the last child of each element in the jQuery collection.
    For more information see here .append()
  2. .live()
    This method is a variation on the basic .bind() method for attaching event handlers to elements. The .live() method which will tell jQuery to bind any current and future references of “#login-box” to the click event.
    For more information see here .live()

Conclusion

We created a simple modal dialog window using jQuery and login box with CSS3. If anyone has any questions, advice, or comments please feel free to let me know!

92 Comments

  1. kumar

    I used code..but if i click the login button the login box is not coming…wat wil be the reason..i followed all your steps properly

  2. Really useful publish..Thanks for sharing with us. it will be very useful while functioning.. Thanks a LOT!!s

  3. Bruce

    Nice simple implementation, but client is complaining that the login box doesn’t appear when using FireFox on an Ipad. Since I don’t have an Ipad, no idea of what the problem might be.

  4. Nice Login Style..

    Thanks..

  5. viral

    i agree with kumar.When clicking on submit button ,no event is called.

  6. Hello,

    The attribute ‘Type’ of the button should be ‘submit’ and not ‘button’. The form would be submit after this modification.

  7. thanks buddy,,, :)

  8. Nice tutorial, thanks for sharing :)

  9. Jerry Harris

    I was wondering how do you get good at being a web developer. I’m in college for computer science and I do love programming and website design. I really wanna get good at it. Any advice?

  10. Yuvraj

    Thanks for shairing is

  11. priyanka

    very nice

  12. shrutika

    thank you
    i hv basic knowledge of html and css
    plz tell me how describe sequence of file execution and name

  13. arun

    thank you , it is really awesome. but there is one problem. if i run this code on internet explorer it is not working properly. can you please help me with that.

    • Don’t worry mate, I’m planning a total redesign of my entire website / blog, when it is finished I will create a working version of IE for this login box.

  14. Aakash

    Really It’s Nice…..

  15. Manos

    Opacity problems on Internet Explorer 8

  16. Thank You, this was just what I was looking for it helped me complete my website project :-)

  17. ansary

    really helpfull one…

  18. Kevin

    Hi, I followed all ur steps properly. But when I click the button, the page faded, and the login box is not coming out. Can you help me?

  19. Kristina B.

    Brilliant, thank you this helped me a lot! I am a little confused as to how I can incorporate false password denial into this? No matter what password or username I enter, it always allows access to the form action I set…

    Can anyone help me?

  20. Thanks. It would be convenient if you provided a zip of all the code, but what you have here is great.

  21. wibisono

    Amazing!

  22. Hello, is it possible to change this code so the box pops up automatically on page loading ? – Thanks :-)

  23. NEWBIE

    Hi Alessio, wow, very cool.
    A simple question: if my href=”#login-box”, where can I position the URL of the file I want to open, when the user inserts the correct password?

    Thanks!

  24. Ahmed

    that’s nice work thank alot :)
    if i want that login appear without using to click on the login/signin link
    i want it appear onload the page
    i used onload the body but i doesnt make any sense so if there is any advice ??

    thanks

  25. SYEd

    Nice tut buddy ….
    thanks — :)

  26. tafseer

    Tafseer Khan

    Works fine with me, but when i click on close button, did’t work with me, can you help me???

  27. This is fantastic!! Thank you very much. I have incorporated it into my WordPress plugin for using a modal help popup for each option. It’s BEAUTIFUL!!

    One question… is it possible to add a scroll bar for when the content within the modal window becomes too long for the screen? Currently, it just “squeezes” what it can into the screen.

    Otherwise… Awesome!!

  28. Thank you !
    Can you share code this application.
    it doesn’t work with me :(

  29. Ronald

    Boss you have explained well but the posted code is completely shows discontinuity. Please post the full working code…. in my case i can see only login/signin link,,, when i click i could not,, and had given the image reference too… so pls post full resource….

  30. Ronald

    And one more thing,,, if i use later versions of JQuery this is not working…..

    Please let me know till which version i can use ??

    Regards
    Ronald

  31. samir

    hello tanks very very very good

  32. wawi

    wow!.. great work!….good job man!..

  33. John

    Just letting everyone know that if you copy and pasted the code and it’s not working, it’s likely because the jQuery src is incorrect on his explanation code. He writes:

    http://code.jquery.com/jquery-1.6.4.min.js

    where it should be:

    http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js

    I hope that helps! Great post by the way, really helped with my site!

  34. Rocco

    Hello,
    it’s possible set modal window with close only click button?

    Thank you

  35. Good one. Can I load one ajax page content using this?

  36. Preeti

    Nice Tutorial,,,,, Thanks alot :)

  37. Excellent resource. I will apply and test them in different browser versions. It looks very good.

  38. frank

    Very nice – Works like a charm on chrome and firefox, and allmost on ie lol
    With jQuery -1.8.1.js
    But i had to watch source from demo to make it work
    Anyway – thanx for sharing – love education :) :)

  39. 3tripps

    Great code! Thank you, just one question, can you have this work on a delay and pop up by itself?

    Thanks, you rock!

  40. Hector

    I was having trouble with the transparecy in IE. So i took out the append:

    //$(‘body’).append(”);
    and replaced it with:

    $(“#mask”).show();

    Then in your HTML add this line:

    It worked beautifully!

  41. Nirmal Hutait

    Really………………..Really ……………beautifully!!!!
    Thanks a lot…..for sharing .

  42. Good work bro!! But the code is not working when we press the Enter key!!!

  43. Kwesi

    Thanks you are great

  44. chnadn kumar

    very nice

  45. nagendra

    Nice Tutorial,,,,, Thanks alot :)

  46. Harish

    nice………Thanks

  47. Mojtaba

    Thanks .
    its work for me as esay as i can think.

  48. Excellent!!!
    Just Love this post…
    Very useful…

  49. Manoj kumar

    It is very good tururial for box modal dialog window

  50. eLmack

    does anyone know how to pass a php variable to a modal window and use it again in php?

  51. Berry

    Really Nice.Thanks for Sharing

  52. Hi

    Thanks for sharing ..!!
    there should be validation also on pop up login ..!!!
    Thanks

  53. Roberto

    hey man very cool, but how can I modify it if i want the pop up to be the first page

  54. chinna

    Very nice………….

  55. dwight

    I’ve implemented this into my shopify page, however whenever I click. the modal fades out., I cannot enter text or click any of the buttons. I’ve attempted messing with the z-index to see if the mask had been sitting on top but nothing has worked. Please help!

  56. Hussain

    Very nice tutorial and thanks for sharing i was looking for this since many days thank you once again

  57. Gigi Mai

    Thank you so much, such a great tutorial

  58. Cool tool. I’m going to try it. Many thanks. Great contribution!

  59. Awesome! I just loaded it onto my restaurants website and it works beautifully. Slick!

  60. Kavita

    Done Now…………. Thanks A Lot………….

  61. Singh

    Say I want to include two of these pop up on the same page. One for signing in and another for registering how do I go about that?

    Sorry if the following is not clear…
    This is what I tried.
    I have created another div and id=register-box and class=register-popup. I have modified the form to include the necessary fields.
    I have changed the css file and updated it to include .register-popup
    I have copy what was to be included in the script tags and pasted it (still inside the $(document).ready(). In the script I have changed all the variables accordingly. But it does not work.

    Any help will be greatly appreciated it.

    Thanks

  62. Singh

    Alright so after some debugging this is what I have narrowed down my problem to…

    basically in my script tag I have the following:
    begin script tag
    $(document).ready(function () {
    $(‘a.login-window’).click(function () {
    .
    .
    .
    .
    });

    $(document).ready(function () {
    $(‘a.register.window’).click(function () {
    .
    .
    .
    /* same code as ‘a.login.window’ with exception of approriae renames. */
    .
    .
    });

    End script tag.
    So basically what I have determined is that when I click on the register link (which I created similarly to login link as you described above) the jquery code ‘a.register.window’ never executes. How do I fix this?

    Again, thanks in advance.

  63. Singh

    Okay, never mind I solved my problem. Thanks for the great tutorial.

  64. Neil Patel

    How could you incorporate this into an emial form?

  65. JY

    Hi, nice tutorial , but there is a problem, The modal overlay did not cover the youtube video which I had implement on my site, the video appear in front of the modal even I have set the z-index.
    Any idea?

  66. Nathan Bartell

    What files would I need to edit to add this to a wordpress site?

  67. worlduser

    i tried this code and ot worked great. i am not able to write th validation check when signin button is clicked. how can i display an error message when signin is clicked d say invalid username and password. pls guide me thru.

  68. pachonk

    Where do I place the post request…?

  69. Nandan

    Is there a way to implement the same by calling a file containing the code? I have lots of pop ups in my site and cannot include all that code all over the site. Need a method to call individual file for each pop up.

  70. Lens

    Hello!
    I’m new using this. How can I make this box popup when the page load?

    thank you

  71. Praveena

    very nice

  72. Thanks So Much This Tutorial Was Really Very Usefull
    Such a good conceptual arrangement of JQuery code.

  73. Cool man! Simple jquery codes but clear tutorial.

  74. yo

    hello,
    Thank you very much, its work perfectly for me , but i have a problem the “close_pop.png” do not appear

  75. My jquery version is 1.9, so .live() it’s deprecated and it didn’t work. I used .on() instead of .live. It’s work perfectly now.

  76. pankaj

    i am not able to perform action in clicking the sign in button

  77. great but i want this on page load then hoe it is poassible

  78. What can i do to make this load on visit to index.html also? I would like this to prompt users to signin/register when ther viset the site.

  79. Eric Lau

    Can I know how to auto launch the pop up windows on page load?

    Thanks.

  80. Jelle van der Schoot

    Thanks, works like a charm! However, is it possible to open the popup on a submit button? I’m passing a variable (?id=13) through the URL, so I can’t use the # … Any ideas? Thanks.

  81. Really nice, people can use latest version of jquery for better result

  82. Alex

    Wow, this is awesome. Thank you so much for sharing!

Leave a Reply