html modal popup window

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: More information:

html page

<!DOCTYPE html>
    <meta charset="utf-8" />
    <meta lang="en" />
    <link rel="stylesheet" href="">
    <link href='|Oswald' rel='stylesheet' type='text/css'>
    <script src=""></script>
    <script src=""></script>
        <!-- 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">


    <!-- Javascript at the bottom of the html template -->
      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('', centerModal);
      $(window).on("resize", function () {

results matching ""

    No results matching ""