Sliding Fullscreen Modal Plugin For jQuery - takeitover.js

File Size: 6.44 KB
Views Total: 2722
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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 class="takeitover-content">
    <h1>jQuery takeitover.js Demo</h1>

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


4. Customize the animation.


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


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


6. Show / hide the close button.


  closeButton: true


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


  clickOnOverlay: false


8. Execute a custom function when the animation ends.


  complete: null


Change log:


  • fix dynamic issues when loading with ajax


  • Made parameters for before and callback function


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


  • active classes added


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