Bootstrap Tutorial - Create Modal Dialog with Pull-Right Button Fix








The following code shows how to create Modal Dialog with Pull-Right Button Fix.

Example

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.10.1.js'></script>
<link rel="stylesheet" type="text/css"
  href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<script type='text/javascript'
  src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<style type='text/css'>
#fixedPullModal .modal-content {<!-- w  w w  .j a  v  a  2  s . co m-->
  overflow: auto;
  padding-bottom: 15px;
}
</style>
</head>
<body>
  <a data-toggle="modal" href="#defaultModal"
    class="btn btn-primary btn-large">Default Modal</a>
  <br>
  <a data-toggle="modal" href="#pullRightModal"
    class="btn btn-danger btn-large">Open Default Pull Right Modal</a>
  <br>
  <a data-toggle="modal" href="#fixedPullModal"
    class="btn btn-success btn-large">Open Fixed Pull Right Modal</a>
  <div id="pullRightModal" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"
            aria-hidden="true">x</button>
          <h4 id="modal-label">Example With Pull Right Modal</h4>
        </div>
        <div class="modal-body">
          <form>
            <textarea class="form-control" rows="3"></textarea>
            <button type="submit" class="btn btn-success pull-right">Submit</button>
          </form>
        </div>
      </div>
      <!--modal-content-->
    </div>
    <!--modal-dialog-->
  </div>
  <!--modal-->
  <div id="fixedPullModal" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"
            aria-hidden="true">x</button>
          <h4 id="modal-label">Example With Fixed Pull Right Modal</h4>
        </div>
        <div class="modal-body">
          <form>
            <textarea class="form-control" rows="3"></textarea>
            <button type="submit" class="pull-right btn btn-success">Submit</button>
          </form>
        </div>
      </div>
      <!--modal-content-->
    </div>
    <!--modal-dialog-->
  </div>
  <!--modal-->
  <div id="defaultModal" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"
            aria-hidden="true">x</button>
          <h4 id="modal-label">Example Without Pull Right Modal</h4>
        </div>
        <div class="modal-body">
          <form>
            <textarea class="form-control" rows="3"></textarea>
            <button type="submit" class="btn btn-success">Submit</button>
          </form>
        </div>
      </div>
      <!--modal-content-->
    </div>
    <!--modal-dialog-->
  </div>
  <!--modal-->
</body>
</html>

Click to view the demo