"Login form in a modal"
Bootstrap 2.3.2 Snippet by msurguy

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <a class="btn btn-primary" data-toggle="modal" href="#myModal" >Login</a> <div class="modal hide" id="myModal"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">x</button> <h3>Login to MyWebsite.com</h3> </div> <div class="modal-body"> <form method="post" action='' name="login_form"> <p><input type="text" class="span3" name="eid" id="email" placeholder="Email"></p> <p><input type="password" class="span3" name="passwd" placeholder="Password"></p> <p><button type="submit" class="btn btn-primary">Sign in</button> <a href="#">Forgot Password?</a> </p> </form> </div> <div class="modal-footer"> New To MyWebsite.com? <a href="#" class="btn btn-primary">Register</a> </div> </div> </div> </div>

Related: See More

Questions / Comments:

How do i send the form data to a php file? help me please thanks

<form id="quick-login" role="form" class="form col-md-12 center-block" method="post" action="{$mybb-&gt;settings['bburl']}/member.php">

Chaz Cash () - 3 years ago - Reply 0

Hi you can check for this bootstrap php login form tutorial http://www.kodingmadesimple...

Valli () - 2 years ago - Reply 0

i have problem with this code...modal form doesn't display in my page..can u give me all code for "login form in model"..or explain me where to write which code..

beginner () - 4 years ago - Reply 0

This is using Bootstrap 2. Which version of Bootstrap does your site use?

maxsurguy () - 4 years ago - Reply 0

hi, do you have a Bootstrap 3 version of this? thanks.

Kurz kun () - 4 years ago - Reply 0

Check out this one: http://bootsnipp.com/snippe...

maxsurguy () - 4 years ago - Reply 0

thank you so much.

Kurz kun () - 4 years ago - Reply 0

Hi, and thanks for this.

Is there a way not to close this modal box when somebody hit the submit button ?

Actually, I have enter a form in the box. But when the user submit it, the box closes.

Any idea ?


Carlo () - 5 years ago - Reply 0

very goog idea ! you're right !

Max () - 5 years ago - Reply 0

It would be nice to outline what javascript files, etc. are needed to make this type of interface work in users applications. While I can easily view the source and decipher what is needed, would be a good idea to share with others what is necessary.

codedungeon () - 6 years ago - Reply 0

http://twitter.github.com/b... Have a look @ this. Just modified it slightly

இராஜேஷ் குமார் ஆணிமுத்து () - 6 years ago - Reply 0

This is standard Bootstrap modal dialog, there are no extra javascript needed to make it work =) Or what do you mean?

maxsurguy () - 6 years ago - Reply 0

If it was me asking the question, I would have meant the code necessary to validate the user ID and password entered.

txdot () - 5 years ago - Reply 0

if u need a validation plugin check this

Sujay Sreedhar () - 5 years ago - Reply 0