Basic overview


  • .dialog-btn  - dialog display button.
  • data-dialog-element="..."  - #id or .class of the element which will be transformed in dialog.

Each window is composed of a header and content and can be closed by clicking on the icon "x" in the title.

<button class="dialog-btn" data-dialog-element="#dialog">...</button>
 
<div id="dialog" class="dialog" title="Default dialog">...</div>

Additional parameters

  • data-dialog-title="..."  -  dialog title.
  • data-dialog-classes="..."  -  additional classes for dialog  (classes are separated by space!).
  • data-dialog-effect="..."  -  dialog opening effect  [blind, clip, drop, fade, fold, slide].
  • data-dialog-width="..."  -  dialog width, is indicated in pixels "px".
  • data-dialog-height="..."  -  dialog height, is indicated in pixels "px".
  • data-dialog-open="..."  -  if true is set up, dialog will be open by default. 
  • data-dialog-draggable="..."  -  if true is set up, dialog will be draggable over the screen. 
  • data-dialog-resizable="..."  -  if true is set up, dialog will be resizable.

ATTENTION! All additional parameters  (data-*) are applied to .dialog-btn

Dialog opening effects


Each window is composed of a header and content and can be closed by clicking on the icon "x" in the title.

<button class="dialog-btn" data-dialog-element="#dialogEffect" data-dialog-effect="blind">...</button>
<button class="dialog-btn" data-dialog-element="#dialogEffect" data-dialog-effect="clip">...</button>
<button class="dialog-btn" data-dialog-element="#dialogEffect" data-dialog-effect="drop">...</button>
<button class="dialog-btn" data-dialog-element="#dialogEffect" data-dialog-effect="fade">...</button>
<button class="dialog-btn" data-dialog-element="#dialogEffect" data-dialog-effect="fold">...</button>
<button class="dialog-btn" data-dialog-element="#dialogEffect" data-dialog-effect="slide">...</button>
 
<div id="dialogEffect" title="Checking the effects">...</div>

Dialog size


Each window is composed of a header and content and can be closed by clicking on the icon "x" in the title.

<button class="dialog-btn" data-dialog-element="#dialogSize" data-dialog-width="300" data-dialog-height="200">...</button>
 
<div id="dialogSize" title="This dialog has its own width!">...</div>

Custom classes for dialogs


Adding classes

Each window is composed of a header and content and can be closed by clicking on the icon "x" in the title.

<button class="dialog-btn" data-dialog-element="#dialogClass" data-dialog-classes="warning">...</button>
 
<div id="dialogClass" title="This dialog is a warning! use class .warning">...</div>

Color alternatives

The dialogs can easily be made more expressive for the particular context as well as the other components by adding one of the classes.

  • View by default => show
  • data-dialog-classes="success" => show
  • data-dialog-classes="warning" => show
  • data-dialog-classes="error" => show
  • data-dialog-classes="info" => show

Each window is composed of a header and content and can be closed by clicking on the icon "x" in the title.

Dialog dragging


Each window is composed of a header and content and can be closed by clicking on the icon "x" in the title.

<button class="dialog-btn" data-dialog-element="#dialogDraggable" data-dialog-draggable="true">...</button>
 
<div id="dialogDraggable" title="This window can be moved!">...</div>

Dialogs resizable


Each window is composed of a header and content and can be closed by clicking on the icon "x" in the title.

<button class="dialog-btn" data-dialog-element="#dialogResizable" data-dialog-resizable="true">...</button>
 
<div id="dialogResizable" title="This dialog can be resized!">...</div>