Basic Popup And Modal Plugin With jQuery | stepframemodal

jquery-stepModal plugin shows and hides the current page content that is triggered by a user’s click or by a function call. There are many options available, and any of them can be passed when the function is called.

modal popup in html, how to create popup in html with css, css modal popup, jquery modal popup

A Simple Modal Dialog In Vanilla JavaScript | Popup-Dialog

How to make use of it:

1. Load the latest version of jQuery and the jQuery stepframeModal plugin at the end of your webpage.

<script src="//"></script>
<script src="jquery.stepframemodal.js"></script>

2. Create modal content.

<div id="demo" class="popup">
  <div class="popup-container">
    <div class="popup-content">
      <span class="message">Modal content goes here</span>
      <div class="popup-close js-popup-close modal-close">X</div>

3. Create a toggle to trigger the modal popup.

<a href="#demo" class="modal-popup">Trigger</a>

4. Add your own custom CSS for the modal popup style.

.popup {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  vertical-align: middle;

.popup-container {
  display: block;
  margin: 0 auto;
  padding: 24px;
  text-align: center;
  text-align: center;

.popup-content {
  padding: 2em;
  background-color: #fff;
  text-align: left;
  display: inline-block;
  position: relative;
  min-width: 50%;
  min-height: 200px;

.popup-close {
  background: none repeat scroll 0 0 #fff;
  cursor: pointer;
  display: block;
  font-size: 150%;
  line-height: 1.33333em;
  width: 1.3333em;
  height: 1.3333em;
  line-height: 130%;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  z-index: 2;
  color: #222222;

5. Javascript to enable trigger button to toggle target form popup.


6. All default customization options.


// for multiple modal popups
id: 'popMod',

// debug mode
debug: false,

// transition options
// 'fade', 'slideDown', 'show'
// or a custom function
transition: 'fade',
transitionIn: 'fade',
transitionOut: 'fade',

// css selector for close button
closeSelector: ".modal-close",

// class that will be applied to the modal content when it is opened 
modalClassSelect: 'sfModalClass',

// 'slow' or 'fast'
transitionInTime: 'slow',
transitionOutTime: 'fast',

// data attribute name to use to specify modal target
dataAttribute: 'modaltarget',

// whether or not the modal window will close on click
modal: true



  • debug (false) – writes messages to the FireBug console to let you know what is happening
  • modal (true) – whether or not the modal window will close when the background is clicked and escape key is released
  • transition (fade) – type of transition/animation to use when showing or hiding the content (see below for additional options)
  • transitionIn (fade) – type of transition/animation to use when showing the content (if not included the transition value is used) (see below for additional options)
  • transitionInTime (slow) – speed parameter for transitionIn jquery animation function, can be time in milliseconds or a valid jquery speed variable (‘slow’, ‘fast’)
  • transitionOut (fade) – type of transition/animation to use when hiding the content (if not included the transition value is used) (see below for additional options)
  • transitionOutTime (slow) – speed parameter for transitionOut jquery animation function, can be time in milliseconds or a valid jquery speed variable (‘slow’, ‘fast’)
  • closeSelector (.modal-close) – css selector for close button. Any item with this selector will close the modal on click
  • modalClass (stepModal) – class that will be applied to the modal background when it is opened (use to target styling)
  • delayBackgroundAnimation (true) – should the background fade in before the content is animated
  • appendSelector (body) – jQuery selector for element to append the modal background to
  • backgroundTransitionSpeed (‘fast’) – speed for background fade in/out animation
  • contentAnimationDelay (250) – delay between the background animation and the content animation
  • dataAttribute (modaltarget) – data attribute name to use to specify modal target
  • onOpen (void) – function called when modal is opened
  • onClose (void) – function called when modal is closed

Transition Options:

  • ‘fade’ – animate the opacity of the content element from 0 to 1 (in) or from 1 to 0 (out)
  • ‘slideDown’ – animate the content element from -1.5 * height of the element to 0 (in) or from 0 to -1.5 * height of the element (out)
  • ‘show’ – instantly show (in) or hide (out) the content element
  • custom – pass in a custom function, for transitionIn and transitionOut, or pass in an array (2 elements), for transition to define in and out at the same time

Basic Modal & Popup Plugin, jquery-stepModal Github

See Demo And Download

Official Website(stepframe): Click Here

This superior jQuery/javascript plugin is developed by stepframe. For extra Advanced Usage, please go to the official website.

Related Posts


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…


Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…


How to Create Audio Visualizations with JavaScript | Wave.js

Audio Visualizer Library – wave.js is a vanilla javascript audio visualization library that provides 20+ creative audio visualization effects to bring more engagement to your visitor. Contribute…


Modern Mobile Touch Slider With Acceleration Transitions | Swiper

Swiper is the most modern free mobile touch slider with accelerated device transitions and amazing original behavior. It is intended for use in mobile websites, mobile web…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

Leave a Reply

Your email address will not be published. Required fields are marked *