Bootstrap Tutorial - Model dialog in page loading








The following code shows a model dialog as page loading.

Example

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!-- w w w .j a  va2s .c  om-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>

</head>
<body style='margin: 20px;'>
  <div id="myModal" class="modal fade in" tabindex="-1" role="dialog"
    aria-labelledby="myModalLabel" aria-hidden="false"
    style="display: block;">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"
            aria-hidden="true">?</button>
          <h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
        </div>
        <div class="modal-body">
          <h4>Text in a modal</h4>
          <p>Duis mollis, est non commodo luctus, nisi erat porttitor
            ligula.</p>

          <h4>Popover in a modal</h4>
          <p>
            This <a href="#" role="button"
              class="btn btn-default popover-test" title=""
              data-content="And here's some amazing content. It's very engaging. right?"
              data-original-title="A Title">button</a> should trigger a popover
            on click.
          </p>

          <h4>Tooltips in a modal</h4>
          <p>
            <a href="#" class="tooltip-test" title=""
              data-original-title="Tooltip">This link</a> and <a href="#"
              class="tooltip-test" title="" data-original-title="Tooltip">that
              link</a> should have tooltips on hover.
          </p>

          <hr>

          <h4>Overflowing text to show scroll behavior</h4>
          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo
            odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus,
            porta ac consectetur ac, vestibulum at eros.</p>
          <p>Praesent commodo cursus magna, vel scelerisque nisl
            consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum
            faucibus dolor auctor.</p>
          <p>Aenean lacinia bibendum nulla sed consectetur. Praesent
            commodo cursus magna, vel scelerisque nisl consectetur et. Donec
            sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo
            odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus,
            porta ac consectetur ac, vestibulum at eros.</p>
          <p>Praesent commodo cursus magna, vel scelerisque nisl
            consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum
            faucibus dolor auctor.</p>
          <p>Aenean lacinia bibendum nulla sed consectetur. Praesent
            commodo cursus magna, vel scelerisque nisl consectetur et. Donec
            sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo
            odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus,
            porta ac consectetur ac, vestibulum at eros.</p>
          <p>Praesent commodo cursus magna, vel scelerisque nisl
            consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum
            faucibus dolor auctor.</p>
          <p>Aenean lacinia bibendum nulla sed consectetur. Praesent
            commodo cursus magna, vel scelerisque nisl consectetur et. Donec
            sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>

      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>

</body>
</html>

Click to view the demo