Simple iFrame Modal Plugin With jQuery - modallink

File Size: 8.28 KB
Views Total: 24916
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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="//"></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.


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 () {
  $"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>
$(".post-data-to-iframe").submit(function (e) {
  var $form = $(this);
  if ($"submitted-from-modallink")) {
     $"submitted-from-modallink", false);

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

6. Possible plugin options.

  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

// open the modal

8. Events.

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

Change log:


  • disableScroll functionality


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