Sliding Fullscreen Modal Plugin For jQuery - takeitover.js

takeitover.js is a simple, CSS-less jQuery modal plugin created for showing a sliding fullscreen popup window to present your web content.

Key features:

• Clicks on the overlay and close button to hide the popup window.
• Customizable animation speed and easing effect.

How to use it:

1. Download and load the jQuery takeitover.min.js plugin after loading jQuery JavaScript library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="takeitover.min.js"></script>

2. Add your own modal content together with a trigger button to the webpage.

<div id="takeitover">
  <div class="takeitover-trigger">
    <button>Trigger Button</button>
  </div>
  <div class="takeitover-content">
    <h1>jQuery takeitover.js Demo</h1>
  </div>
</div>

3. Call the function takeitover() on the top container to initialize the plugin with default options.

$("#takeitover").takeitover();

4. Customize the animation.

$("#takeitover").takeitover({

  // animation speed in milliseconds
  speed: 500,

  // false: disable
  // requires an external easing library such as jQuery UI
  easing: false

});

5. Set the colors of the background overlay & trigger button.

$("#takeitover").takeitover({

  background: 'rgba(0,0,0,0.95)', 
  buttonColor: "white"

});

6. Show / hide the close button.

$("#takeitover").takeitover({

  closeButton: true

});

7. Determine whether to close the modal by clicking on the overlay.

$("#takeitover").takeitover({

  clickOnOverlay: false

});

8. Execute a custom function when the animation ends.

$("#takeitover").takeitover({

  complete: null

});

Change log:

2017-12-06

• fix dynamic issues when loading with ajax

2017-06-13

• Made parameters for before and callback function

2017-06-03

• Fix when closing takeitover, sometimes it didnt remove the takeitover content

2017-05-15

• active classes added

2017-05-02

• JS update

---

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