A tutorial for service.dialog.jquery - Modal/Non-Modal Dialog Popup

November 4, 2014

Overview

service.dialog.jquery is yet another jquery component to bring up a dialog window. I know there are lots of those dialog plugins and so you probably wonder why this one. Well, for me a couple of things are important for such plugins (and too some extend for almost every other type of plugin):

They have to be small (this one is 1.6 kB minified).
They must help me with providing the (software) logic for the problem at hand and not too much the UI side of things; there is often better technology, i.e. HTML and CSS, to solve that than Javascript.
The component should therefore not do any html markup inside the dialog at all and neither any styling (yes I want to specify the 'close' button myself).
It must be possible to setup the dialog in either modal or non-modal mode.

Almost none of the dialog components that have been published meet the above criteria. A lot of them force you to have a title, a close button, etc. Take for instance jQuery UI: by now (and also when you look to the other jquery components I developped) you will probably realize that I am not a particular fan of jQuery UI. I find all of this way too big, too much for what I typically need, and not particularly friendly with respect to styling.

So, that's why there is this simple plugin.

Demo

Click here for a demo.

Download

You can download the latest version of the plugin at GitHub.

Usage

To use the plugin start with adding the following in your header section:

<link rel="stylesheet" type="text/css" href="[your-path]/service.dialog.jquery.css" />
<script src="[your-path]/service.dialog.jquery.min.js"></script>

To specify a dialog window write a container <div class="dialogPopUp"></div> somewhere in the <body> part of your html and bring the content of what you want to see in the dialog in the container.

<!-- The dialog window -->
<div class="dialogPopUp" id="loginPopup">
  <div class="closeButton" onclick="javascript: $('#loginPopup').dialog('close');">
    <span>X</span>
  </div>
  <h3>Log in</h3>
  <div class="loginFormError" id="loginError"></div>
  <form action="/umbraco/Surface/Authentication/LoginMember" id="loginForm" method="post">     
    <div style="margin-bottom:1.2em;">
      <input data-val="true" data-val-required="You must enter a registered account id" id="MemberId" name="MemberId" placeholder="Account id" type="text" value="">
    </div>
    <div>
      <input data-val="true" data-val-required="You must enter your password" id="Password" name="Password" placeholder="Password" type="password">
    </div>
    <div style="margin-top: 0.4em; font-size: 0.9em;">
      <a href="/reset-paswoord">Password forgotton?</a>
    </div>
    <div style="margin-top: 1.0em;">
      <input data-val="true" data-val-required="The Remember me? field is required." id="rememberMe" name="RememberMe" type="checkbox" value="true"
    </div>
    <div>
      <input class="button" type="submit" id="formSubmitBttn" value="Login" />
    </div>
  </form>
</div>

<!-- Some button to show the dialog window -->
<a href="#" onclick="javascript: doLogin();" title="Log in" >Log in</a>

Then, write the javascript code to open the dialog window.

<script type="text/javascript">

  function doLogin() {
    $('#loginPopup').dialog();
  }

  $(function () {
    // We also use service.flatcheckbox.jquery to have a flat 'Remember me'
    // checkbox with label.
    $('#rememberMe').flatcheckbox({ label: 'Remember me' });
  });

</script>

That is all you need to have a fully customizable dialog window. You can style the container div (and its content) any way you want.

Styling

As already described above the service.dialog.jquery only takes care of the functionality that is needed to activate and deactivate a dialog window. CSS is what you need to style the dialog. To help you with that the plugin makes use of the following classes when the dialog is opened:

Class dialogModal: This class is added to the body element when a modal dialog is opened.
Class dialogOverlay: This class is added to the body element when a modal dialog is opened and option modalWithOverlay is set to true.
Class dialogOpen is added to the dialog container element itself when it is opened.
Class dialogNonModal is added to the dialog container element when the dialog is opened in non-modal mode. This allows you to style such dialog different from a modal dialog.
A fixed positioned div element with class dialogBlockPage is appended to the DOM when a modal dialog is opened. This div adds a visible or invisible blocking overlay to the webpage.

The classes (and possible overlay div) are removed when the dialog is closed.

For all those classes you find style definitions in the CSS file that comes with the plugin. You can of course change / overwrite those definitions.
To help you with the dialog container style the CSS file defines class dialogPopUp. It is fixed positioned with 50% left and top, a z-index of 102, width is set to 300px and height to 150px.

API

Initialization method

[jqObject].dialog(options)

The options argument is a javascript associative array (an object with key/value pairs) that allows you to initialize the plugin with some properties.

Properties

openOnInit

Type: Boolean
Default: true
If set to true, the dialog will be opened immediately after construction (initialization). When you set this to false you must open the dialog by using the 'open' method.

closeByEscape

Type: Boolean
Default: true
If set to true, the dialog will be closed when the user presses the Escape key.

modal

Type: Boolean
Default: true
If set to true, the dialog will have modal behavior. That means that other items on the page will be disabled, i.e., cannot be interacted with.
If set to false, the dialog will have non-modal behavior which means that interaction with other elements on the page is not inhibited.

modalWithOverlay

Type: Boolean
Default: true
When this is set to true and you open the dialog in modal mode you will have an overlay below the dialog but above other page elements. With the CSS file that comes with the plugin this adds a semi-transparent layer that dims out the page content behind the dialog. The background color and opacity of this layer is configured in the CSS file to be black and 0.5.

onOpen

Type: callback function
Signature: onOpen: function() { }
This callback is called immediately after the dialog is activated (opened).

onClose

Type: callback function
Signature: onClose: function() { }
This callback is called at the moment the plugin starts deactivating (closing) the dialog window.

Other methods

open

Signature: [jqObject].dialog('open');
You can invoke this method to open a dialog window that previously has been constructed with the option openOnInit: false.

close

Signature: [jqObject].dialog('close');
You can invoke this method to close an active (open) dialog window.

isOpen

Signature: [jqObject].dialog('isOpen');
This method can be used to query the open/close state of the dialog. It returns true when the dialog is open.

A tutorial for service.dialog.jquery - Modal/Non-Modal Dialog Popup

Overview

Demo

Download

Usage

Styling

API

Initialization method

Properties

Other methods

Comments

Open Source Software Contributions

POWERED BY

INTERESTING LINKS