Dialogs

Transforms block elements (usually div) in dialogs in the middle of dialog's screen.

Basic overview

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

Each dialog consists of header and content and can be closed clicking on the icon "x" in the header.

<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 dialog consists of header and content and can be closed clicking on the icon "x" in the header.

<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>

Dialog class

Each dialog consists of header and content and can be closed clicking on the icon "x" in the header.

<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>

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="Это окно можно перемещать!">...</div>

Dialog stretching

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 stretched!">...</div>

Share with your friends

Google+