Web UI - Modal Dialog

About

A modal is a overlay window that is:

  • displayed on top of the current page
  • generally centered (or positioned from the top of window) and therefore not located near the control / interactive element
  • allows and expect further user interactions

It's a call to action where:

Not to be confound with an alert which is a dialog at the top or bottom of the page.

How to create a modal ?

Pure Css

Below you can find a minimum CSS implementation done without any library

  • for the box
#modal {
    position: fixed; /* position top and left below calculated from the window */
    top: 100px; /* 100px from the top */
    left: 150px; /* 150px from the left */
    z-index: 4000 !important; /* On the top of all HTML element */
    padding: 1em; /* To get a bigger box */
    background: aliceblue; /* To see the box */
}
body {
  overflow-y: hidden;
}
  • Page Example
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis neque nibh. Fusce vitae sapien tincidunt, facilisis risus id, vulputate erat. Ut eget ex sem. Donec ornare consequat risus. Fusce cursus non lorem eu pharetra. Quisque in tristique orci. Nunc luctus turpis id augue euismod volutpat. Morbi ut nunc maximus, rhoncus ante at, feugiat nunc.
</p>
<p>
Fusce elementum urna augue, quis lobortis nunc lobortis ut. Nulla vitae arcu hendrerit, sodales lorem quis, ultrices neque. Suspendisse sed pretium diam, eget pretium sapien. Aenean accumsan sit amet ligula id condimentum. Cras sagittis scelerisque tellus, scelerisque ullamcorper dolor. Ut aliquet scelerisque quam. Morbi vel consequat tellus, non tempus erat.
</p>
<div id="modal">The modal box</div>

HTML dialog

HTML - Dialog

<dialog id="ship">
 <form method=dialog>
  <p>A ship has arrived in the harbour.</p>
  <button type=submit value="board">Board the ship</button>
  <button type=submit value="call">Call to the captain</button>
 </form>
</dialog>
var ship = document.getElementById('ship');
ship.showModal();
ship.onclose = function (event) {
    if (ship.returnValue == 'board') {
       console.log("Board the ship");
   } else {
       console.log("Call the capitain");
   }
 };

Bootstrap

Limitations: No more than one modal is shown by page but you can switch between them.

You can still add an alert

Bootstrap uses the modal.js JQuery plugin. Th structure of a modal is:

  • a root container to show and cache the content
    • a modal-dialog class container (role is document)
      • a modal-content class container
        • a modal-header class container
        • a modal-body class container
        • a modal-footer class container

Example of a Modal from Bootstrap

$('#myModal').modal({
  keyboard: true, // can we close the dialog with the touch of a key
  show: true, // do we show it when the page loads
  backdrop: true // do we see a background
})
  • Page content
<h2>Header</h2>
My Beautiful content .......
  • Modal
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
  </div>
  </div>
</div>
  • Result

jQuery Dialog

A dialog is a floating window that contains a title bar and a content area.

.mydialog {
 background: aliceblue;
}
$('#dialog').dialog(
	{
		autoOpen: true, // Open immeditaly
		width: '25%', // The width
		height: 'auto', // The height
		draggable: false, // Draggable from the header
		resizable: false, // Resizable from each side
		position: { my: "center", at: "center", of: window  }, // Position
		dialogClass: 'mydialog' // Additional class
	}
);
<h2>A page</h2>
<p>With a lot of text</p>
<div id="dialog" title="Dialog Title">
I'm a dialog with a 25% width in the middle of my window and a aliceblue background
</div>

jQueryModal

JQuery Plugin Modal is another Jquery plugin for modal

Library

Animation

Documentation / Reference


Powered by ComboStrap