jQuery-plainModal.js Javascript Modal/Popup Library Window Full Examples With Source Code

 

Welcome folks today in this blog post we will be looking at a simple modal/popup library called jQuery-plainModal.js javascript library. All the full source code of the application is shown below.

 

 

 

 

 

Get Started

 

 

// Show modal window. <div id="modal"> is styled via your CSS.
$('#modal').plainModal('open');
// Hide modal window.
$('#modal').plainModal('close');

Getting Started

Load after jQuery.

<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.plainmodal.min.js"></script>

Methods

open

element = element.plainModal('open'[, options])

 

 

close

element = element.plainModal('close')

Hide the shown modal window.

Initialize

element = element.plainModal([options])

 

 

$('#open-button').click(function() {
  // Same initializing per every showing
  $('#modal').plainModal('open', {duration: 500});
});

In this code, it is initialized at once:

// Initialize without showing
var modal = $('#modal').plainModal({duration: 500});
$('#open-button').click(function() {
  // Show without initializing
  modal.plainModal('open');
});

In this code, it is initialized at once:

$('#open-button').click(function() {
  // Initialize at only first time
  modal.plainModal('open');
});

option

currentValue = element.plainModal('option', optionName)
element = element.plainModal('option', optionName, newValue)
element = element.plainModal('option', {
  optionName1: newValue1,
  optionName2: newValue2 ... 
})

 

See also  JavaScript Program to Replace all Instances of a Character in a String Using Regular Expression Full Project For Beginners

 

$('#modal').plainModal({
  offset: function(center) {
    // sizing by view port, step by 100px
    var jqHtml = $('html'),
      width = jqHtml.prop('clientWidth'),
      height = jqHtml.prop('clientHeight');
    width = width * 0.5;
    height = height * 0.5;
    width = Math.round(width / 100) * 100;
    height = Math.round(height / 100) * 100;
    if (width < 100) { width = 100; }
    if (height < 100) { height = 100; }
    this.width(width).height(height);
    center(); // position to center.
  }
});

 

 

var
  modal1 = $('#modal1').plainModal({duration: 500})

  .on('plainmodalbeforeclose', function(event) {
    var from = event.from, orgDuration, offset;
    if (!from) { return; }

    if (from.type === 'keydown') {
      // If the user pushed the Escape key, (s)he is in a hurry.
      orgDuration = modal1.plainModal('option', 'duration');
      modal1.one('plainmodalclose', function() {
          modal1.plainModal('option', 'duration', orgDuration); // Restore
        })
        .plainModal('option', 'duration', 1); // Set to fast closing

    } else if (from.type === 'click' &&
        from.currentTarget.className === 'plainmodal-overlay') {
      // If the user clicked the overlay that is too short
      // distance from this small modal, (s)he might have mistaken.
      // And ignore clicking.
      offset = modal1.offset();
      if (from.clientX >= offset.left - 20 &&
          from.clientX <= offset.left + modal1.outerWidth() + 20 &&
          from.clientY >= offset.top -20 &&
          from.clientY <= offset.top + modal1.outerHeight() + 20) {
        event.preventDefault(); // Stay opening.
      }

    } else if (from.jquery) { // This is jQuery object. i.e. another modal.
      // The another modal takes over this message.
      from.find('.warning-message').text(modal1.find('.warning-message').text());
    }
  });

Leave a Reply