Date: April 6th 2016
Last updated: April 6th 2016

A modal popup window is activated by a button and comes to the foreground. The user is then forced to make a decision or close the window. This example is the most basic version I could find that would a) work and b) center an image in a modal-dialog box.

The example was found here: http://www.bootply.com/mRbjbQ1JAB. More information: http://www.w3schools.com/bootstrap/bootstrap_modal.asp.

html page

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta lang="en" />
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link href='https://fonts.googleapis.com/css?family=Ubuntu|Oswald' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </head>
    <body>
        <!-- Trigger the modal with a button -->
        <button type="button" class="btn btn-primary" 
            data-toggle="modal" data-target="#myModal">Distribution of data</button>

        <!-- My Modal -->
        <div id="myModal" class="modal fade" tabindex="-1" role="dialog"
            aria-labelledby="myModalLabel" aria-hidden="true">
                      <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-body">

                                <img src="../img/boardmeasurements.png" class="img-responsive">

                            </div>
                        </div>
                      </div>
        </div>

    <!-- Javascript at the bottom of the html template -->
    <script>
      function centerModal() {
          $(this).css('display', 'block');
          var $dialog = $(this).find(".modal-dialog");
          var offset = ($(window).height() - $dialog.height()) / 2;
          // Center modal vertically in window
          $dialog.css("margin-top", offset);
      }

      $('.modal').on('show.bs.modal', centerModal);
      $(window).on("resize", function () {
          $('.modal:visible').each(centerModal);
      });
    </script>
</body>
</html>

html modal popup window

results matching ""

No results matching ""