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="//code.jquery.com/jquery-1.11.1.min.js"></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>
   </div>
  </div>
</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.

$('.modal-popup').setupModal()

6. All default customization options.

$('.modal-popup').setupModal({

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

})

Options:

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