Skip to content
Customizable popup
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dev
dist
documentation
.gitignore
.travis.yml
Gruntfile.js
LICENSE
README.md
bower.json
package.json

README.md

mPopup

Build Status

Fast, light and customizable jQuery popup plugin.

Optionally, install via Bower: bower install m-popup , install via NPM: npm install m-popup Install via NuGet PM> Install-Package mPopup

License

Released under the MIT license - http://opensource.org/licenses/MIT

Created by Balan Miroslav

Why should I use this popup?

  • Popup can contain images, video, or HTML content
  • Uses CSS transitions for slide animation ,native hardware acceleration
  • Small file size, fully themed, simple to implement
  • Browser support: Firefox, Chrome, Safari, iOS, Android, IE7+
  • Many configuration options

For complete documentation and examples, visit: http://mirudev.com/mpopup/

How to install

Step 1: Link required files

First and most important, the jQuery library needs to be included (Google cdn or local jQuery file). Next, download the package from github or install via Bower: bower install m-popup , install via NPM: npm install m-popup, and link the mPopup CSS file (for the theme) and the mPopup Javascript file.

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- mPopup Javascript file -->
<script src="/js/mPopup.jquery.min.js"></script>
<!-- mPopup CSS file -->
<link href="/lib/mPopup.css" rel="stylesheet">

Step 2: Create HTML markup

Create a <ul class="mPopup"> element, with any HTML content , in css have to show width and height of popup

<div class="mPopup">
    <!-- any HTML content -->
</div>
.mPopup{
    /* popup css code */
    width: 60%;
    height: 300px;
}

Step 3: Call the mPopup

Call .mPopup() on <ul class="mPopup">. Note that the call must be made inside of a $(document).ready() call, or the plugin will not work!

$(document).ready(function(){
    // generate popup
    var popup = $('.mPopup').mPopup();
    // open generated popup
    popup.mPopup('open');
});

##Configuration options

Options

type Sets a fixed or absolute position for mPopup.

default : fixed
options : fixed , absolute

closeClass Class name to trigger closing of mPopup.

default : mPopup-close
options : string (class name)

closeOnOverlayClick Close mPopup when click on overlay.

default : true
options : boolean (true / false)

overlayClass Overlay class name.

default : mPopup-overlay
options : string (class name)

overlayFade Overlay with fade animation or just hide.

default : true
options : boolean (true / false)

animationType Animation type for popup on opening and closing.

default : fade
options : string (fade / slide) 

animationSpeed Speed of animation.

default : 400
options : (slow / fast) or integer 

positionElement Position popup relative to element.

default : null
options : jQuery object

typePositionObject Type position of element to align.

default : offset
options : (offset / position) 

modifyPosition Modification of current position of mPopup.

default : { top : 0, left : 0 }
options : Object 

Methods

open Manually opens a mPopup.

$('#elem').mPopup('open')

close Manually closes a mPopup.

$('#elem').mPopup('close')

recalculate-position Recalculate current position of mPopup.

$('#elem').mPopup('recalculate-position')

destroy Destroy created popup.

$('#elem').mPopup('destroy')

Events

onOpen Trigger on opening mPopup.

$('#popup').on('mPopop:open' = function (e) {
                   // do something...
                });

onClose Trigger on closing mPopup.

$('#popup').on('mPopop:close' = function (e) {
                   // do something...
                });

Changelog

You can’t perform that action at this time.