Modal Windows

jQuery UI Modal Window

This is the default jQuery UI modal dialog window. The window can be resized and positioned by the user, making it appropriate for modals containing large amounts or variable content. The initial size and width are set in the function options. (Documentation)

<!--The button to open the modal window  --> 
<input type="button" id="btn btn-default btnOpen" value="Open"> 
  
<!--A div referenced in the script. The title of the div is used for the modal header:--> 
<div id="divDialog" title="This is the header for the modal"> 
    <p>The modal content</p> 
</div>

<script type="text/javascript">
    $(function () {
        $("#divDialog").dialog({
            resizable: true,
            autoOpen: false,
            modal: true,
            width: 600,
            height: 500,
            buttons: {
                Cancel: function () {
                    $(this).dialog('close');
                } //end cancel button
            } //end buttons
        }); //end dialog

        $('#btnOpen').on('click', function () {
            $('#divDialog').dialog('open');
        }); //end click handler
    });
</script>

Using a CSS class to trigger resizable option on modals

To make a modal resizable without changing the javascript instantiation, add the class "resizable-modal" to the modal's top level div.

This classname is targeted in script.js to override the resizable option to true, regardless of how it is instantiated.

jQuery UI Modal Window's extended (multiple modals with no extra markup)

An additional script has been added to script.js to allow a developer to introduce additional modals with no additional JS scripting.

To use you will need a toggle div with "modalButton" set as the class attribute, and a div containing the modal content, immediately following the toggle

<input type="button" class="modalButton" value="Open Modal"> 
<div title="This is the header for the modal"><p>This is a modal</p></div>

Cropit Modal Dialog

This modal will open when a user tried to upload a photo which needs to be constrained to a specific aspect ratio

Modal Alerts using jQuery Tools

Simple modal dialog that would replace standard popups dialogs. The 'rel' attribute of the trigger needs to match the id of the modal window: in the example below, the button has rel="#modal-example" to match the id of the in-page modal div, which is hidden by the css. The javascript below is included in jsinc/script.js. (Documentation)

<button class="modalInput" rel="#modal-example">Open</button> 
                  
<div class="modal" id="modal-example"> 
  <div> 
    <h2>This is the heading for the modal</h2> 
    <p> 
      You can only interact with elements that are inside this dialog. 
      To close it click a button or use the ESC key. 
    </p> 
    <p> 
      <button class="btn btn-default close">OK</button> 
    </p> 
  </div> 
</div>

$(document).ready(function () { 
  var triggers = $(".modalInput").overlay({ 
    top: 260, 
    mask: { 
      color: '#fff', 
      loadSpeed: 200, 
      opacity: 0.7 
    }, 
    
    closeOnClick: false
  }); 
});

Modal Alerts using jQuery Tools (programmatic)

To be used when alert or warning content are returned back from the server and require a response; e.g., when the user is locked out from too many failed login attempts. The javascript below is included in jsinc/script.js. (Documentation)

<div id="alert-modal"> 
  <div> 
    <h2>This is the heading for the modal</h2> 
    <p> 
      This is the content 
    </p> 
    <p> 
      <button class="close"> Close </button> 
    </p> 
  </div> 
</div>

// Alert Modal: uses jquery Tools plugin 
$(document).ready(function () { 
  $("#alert-modal").overlay({ 
    top: 260, 
    mask: { 
      color: '#fff', 
      loadSpeed: 200, 
      opacity: 0.7 
    }, 
    closeOnClick: false, 
    load: true
  }); 
});