Press "Enter" to skip to content

Implementing Pop-up Dialogs, Messages with CSS3 | jquery-popup

jquery Popup Plugin to implement popup dialogs, messages, etc. with beautiful CSS3 theme animations, minimal JavaScript, and CSS code.

jquery modal popup free download, jquery ajax modal popup example, multiple modal popup jquery example, jquery dialog open event, jquery dialog responsive

Features:

  • Easy to design and customize.
  • Ajax is enabled.
  • Supports any media types like text, image, youtube videos, iframe, etc.
  • 7 built-in CSS3-powered animations.

How to make use of it:

1. Load the jQuery library with jquery.popup.css, jquery.popup.js, and jquery.popup.dialog.js in the document.

<link href="jquery.popup.css" rel="stylesheet">
  ...
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.popup.js"></script>
<script src="jquery.popup.dialog.js"></script>

2. Create a link with the action data attribute to display a Youtube video in a modal window.

<a href=" " data-action="watch-video">
  <img src="video.jpg" />
</a>

<!-- Modal markup -->
<div class="popup effect-fade-scale" id="popup-video">
  <div class="embed-container"></div>
  <a href="#" class="popup-close">
    <i class="glyphicon glyphicon-remove"></i>
  </a>
</div>
#popup-video.popup {
  overflow: visible;
  background-color: #1B1B1B;
  box-shadow: 0px 1px 5px 0 rgba( 0, 0, 0, .8 );
}

#popup-video.popup .popup-close {
  position: absolute;
  z-index: 2;
  top: 0;
  right: -30px;
  font-size: 1.5em;
  color: #fff;
}

#popup-video.popup .embed-container { 
  position: relative; 
  z-index: 1;
  padding-bottom: 56.25%; 
  height: 0; 
  overflow: hidden; 
  max-width: 100%; 
} 

#popup-video.popup .embed-container iframe, 
#popup-video.popup .embed-container object, 
#popup-video.popup .embed-container embed { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}
$(document).ready(function(){
  $('.popup').popup({
    close: function(){
      $(this).find('.embed-container').empty();
    }
  });

  $(document).on('click', '[data-action="watch-video"]', function(e){

    e.preventDefault();

    var plugin = $('#popup-video.popup').data('popup');

    $('#popup-video.popup .embed-container').html(
      '<iframe src="'
      + e.currentTarget.href
      + '?autoplay=1" frameborder="0" allowfullscreen />'
    );

    plugin.open();
  });

});

3. Create a button to toggle a dialog with a popup.

<button class="btn" data-dialog="#popup-dialog">Click Me</button>

<!-- Dialog Content -->
<div class="popup effect-fade-scale" id="popup-dialog">
  <div class="popup-content">
    <h3>Dialog Box Heading</h3>
    <p>
    Dialog Content Here
    </p>
    <button class="popup-close">Close</button>
  </div>
</div>
.popup {
  background-color: rgb( 248, 248, 248 );
  box-shadow: 0px 2px 2px 0px rgba( 0, 0, 0, .3 );
}

.popup-content {
  padding: 20px 40px 30px 40px;
}

.popup-overlay {
  background-color: rgba( 0, 0, 0, .3 );
}

4. Parameters.

// modal mode
modal   : false,

// floating mode
bubble  : true,

// callback functions
open    : function() {},
close   : function() {},
realign : function() {}

5. General methods.

$.popup config([Object params])
$.popup open()
$.popup overlay()
$.popup close([Number delay])
$.popup realign()
jQuery destroy()

responsive jquery modal & dialog popup, jquery-popup Plugin/Github, animated modal popup using jquery, responsive dialog box css


See Demo And Download

Official Website(Konstantin-Kachurenko): Click Here

This superior jQuery/javascript plugin is developed by Konstantin-Kachurenko. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.