Minimal Dialog Window Plugin For Modern Browsers – cfmodal

Category: Javascript , Modal & Popup | July 18, 2019
Author: pieisdead
Views Total: 160
Official Page: Go to website
Last Update: July 18, 2019
License: MIT

Preview:

Minimal Dialog Window Plugin For Modern Browsers – cfmodal

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();

You Might Be Interested In:


Leave a Reply