Twitter Bootstrap

by ouadie

HTML

<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<h1>Hello, world!</h1>
        <!-- Forgot Password Form -->
          <div id="forgotPassword" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h3 id="myModalLabel">Forgot password?</h3>
            </div>
            <div class="modal-body">
  	          <p>No problem. Please provide your registered email and click submit button to get your password. </p>
            	<p>Your passowrd will be sent to your E-mail address </p>
              <form id="forgotPasswordForm" method="post" action="/echo/html/">
                  <fieldset>
                       <label>E-mail</label>
                      <input type="text" name="email" placeholder="Type your email here">

                      <button type="submit" class="btn">Submit</button>
                  </fieldset>
              </form>                              
            </div>
            <div class="modal-footer">
              <button class="btn" data-dismiss="modal">Close</button>
            </div>
          </div>
 <!-- Forgot Password Form end -->          
 &nbsp;<a href="#forgotPassword" data-toggle="modal">Forgot password?</a>

JavaScript

var frm = $('#forgotPasswordForm');
 frm.submit(function (e) {
        e.preventDefault();
        $.ajax({
            type: frm.attr('method'),
            url:  frm.attr('action'),
            data: frm.serialize(),
            success: function (data){    
              $(".modal-body").html("Your result:" + data);
           }
       });
    });