takeitover.js - Download here
This a plugin for content to show as a takeover, or popup if you will. You simply just add a single file for your project and follow the guide, and you will be able to show content in a popup. It simply and works very well.
How to add it
JQUERY
Add this just before the body end tag.
<!-- JQUERY LIBARY --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- TAKEITOVER --> <script src="YOURLOCATION/takeitover.min.js"></script> <script> $(document).ready(function(){ // select the element you want to have as trigger for the takeitover content $(".takeitover-trigger").takeitover(); }); </script>HTML
Inlcude the takeitover.min.js in your project.
<div class="takeitover-trigger"> <!-- this the element you click to open your takeover --> </div> <div class="takeitover-content"> <!-- This is the content that will be shown in a takeover --> <!-- Inside here you can put your own markup and all of it will be shown in a takeover --> </div>Target specific element
<div class="takeitover-trigger" data-target="#target"> <!-- add 'data-target' attribute to target a element --> </div> <div class="takeitover-content" id="target"> <!-- By doing this you can place this element anyplace you want in the document --> </div>Options
speed (Default: 500)
Adjust the speed of the animation
easing (Default: false)
Jquery UI easings. Needs to have jquery UI installed for this to work.
contentSelector (Default: '.takeitover-content')
This is the content selector that displays in the takeover
background (Default: 'rgba(255,255,255,0.95)')
The background color of the overlay
clickOnOverlay (Default: true)
Detects weather the takeover should close when the user clicks the overlay
closeButton (Default: true)
Set to false if you dont want to show any closeButton
buttonColor (Default: "black")
Control the color of the close button
before (Default: null)
The before function for when animation has started
callback (Default: null)
The callback function for when animation has
Example:
<script> $(document).ready(function(){ $(".takeitover-trigger").takeitover({ callback: function(){ // do something }, }); }); </script>closeFunction (Default: null)
Call a function when takeitover closes
How to write the options
<script> $(document).ready(function(){ $(".takeitover-trigger").takeitover({ speed: 500, easing: false, contentSelector: '.takeitover-content', background: 'rgba(255,255,255,0.95)', clickOnOverlay: true, closeButton: true, // false if you dont want to display the close button buttonColor: "black", // write any color you want before: function(trigger, target){ // you can now do something with the triggerselector ('trigger') or the target selector ('target') // do something }, callback: function(trigger, target){ // you can now do something with the triggerselector ('trigger') or the target selector ('target') // do something }, closeFunction: function(){ // do something } }); }); </script>
