Minimal Dialog Window Plugin For Modern Browsers – cfmodal

Preview:

Description:

CF-Modal-JS is a free to use dialog window plugin for all modern browsers.

You can modify all visual aspects of your dialog windows by editing the cf-modal-style.css stylesheet.

How to use it:

Load the core stylesheet cf-modal-style.css in the document’s head section.

<link href="cf-modal-style.css" rel="stylesheet">

Load the minified version of the cfmodal plugin at the end of the document.

<script src="cfmodal.min.js"></script>

Create modal content in a unique container.

<div id="cfModal-demo" class="cf-modal">
  <div class="modal-header">Modal Title</div>
  Modal Content Here
</div>

Create a modal dialog and load content from the container you just created. All possible parameters:

• winelem: modal element
• winwidth: modal width
• winheight: modal height
• animation: animation type (‘fade’, ‘grow’, ‘slideleft’, ‘slideright’, ‘slidetop’, ‘slidebottom’)
• framesource: iframe URL

// cfModal.openWindow(winelem, winwidth, winheight, animation, framesource);
cfModal.openWindow('cfModal-demo', '800px', '500px', 'slidetop');

Create a modal dialog and load content via iframe.

cfModal.openWindow('cfModal-demo', '600px', '400px', 'grow', 'example.html')"

Close the modal dialog manually.

cfModal.closeWindow();