Simple iFrame Modal Plugin With jQuery - modallink

modallink is a simple but fully configurable plugin which enables you to display any external links into a modal popup via iframe.

Features:

• fade animation on open and close.
• can open modal without binding link.
• possible to open modal with GET, POST, REF, CLONE methods.

How to use it:

1. Download and load the jQuery modallink plugin's files into your webpage which has jQuery library loaded.

<link rel="stylesheet" href="jquery.modallink.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.modallink.js"></script>

2. Create a modal toggle link and specify the link to be displayed in the modal.

<a href="iframe.html" class="modal-link">Open</a>

3. Initialize the modal plugin.

$(".modal-link").modalLink();   

4. You can also specify the external link in the JavaScript like this:

<button class="btn-click-me">click me</button>

$(".btn-click-me").click(function () {
  $.modalLink.open("iframe.html", {
    // options here
  });  
});

5. Send large amount of data to the modal via 'Post' method.

<form action="iframe.html" class="post-data-to-iframe">  
  <input type="text" name="test">
  <button type="submit">Post to iframe</button>
</form>

$(".post-data-to-iframe").submit(function (e) {
  e.preventDefault();
  var $form = $(this);
  if ($form.data("submitted-from-modallink")) {
     $form.data("submitted-from-modallink", false);
     return;
  }

  var url = $form.attr("action");
  $.modalLink.open(url, {
     $form: $form,
     title: "Posting form to modal window demo",
     method: "POST"
  }) 
});

6. Possible plugin options.

$(".modal-link").modalLink({
  height: 600,
  width: 900,
  showTitle: true,
  showClose: true,
  overlayOpacity: 0.6,
  method: "GET", // GET, POST, REF, CLONE
  disableScroll: true,
  onHideScroll: function () { },
  onShowScroll: function () { }
});   

7. API methods.

// close the modal
$.modalLink("close")

// open the modal
$.modalLink("open")

8. Events.

$(".modal-link").on("modallink.close", function() {
  // do something on close
});

Change log:

2016-05-31

• disableScroll functionality

2016-05-30

• showTitle value can be set from attribute

---

This awesome jQuery plugin is developed by brightspark-est. For more Advanced Usages, please check the demo page or visit the official website.