Create Floating Ads That Move Across The Screen - jQuery bay-window.js
File Size: | 11 KB |
---|---|
Views Total: | 217 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

bay-window.js is a jQuery plugin that creates floating popup windows from any DOM elements and makes them move around over the web page.
This plugin is not just an ordinary popup that was originally designed for messages: it even outperforms a page's main content by being able to be moved across the screen. Can be used for ads, promotions, announcements, or to show something important.
How to use it:
1. Load the JavaScript jquery.bay-window.js
in the document.
<script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/jquery.bay-window.js"></script>
2. Create a floating popup window dynamically.
$.createBayWindowElement({ // width/height of the popup window width: '400px', height: '300px', // path to the ads image src: './images/bay-image.png', // url href: 'https://www.jqueryscript.net', // target attribute target: '__blank', // text to display in the close button closeText: 'close', }).bayWindow({ // step length stepLength: 1, // start position startTop: 0, startLeft: 0, // z-index zIndex: 9999, })
3. Create a floating popup window from an existing DOM element within the document.
<div class="custom" id="custom"> ... </div>
$('#custom').bayWindow({ // options (see above) here })
4. API methods.
// start the animation $('#custom').bayWindow('run'); // stop the animation $('#custom').bayWindow('stop'); // destroy the animation $('#custom').bayWindow('destroy');
This awesome jQuery plugin is developed by trague. For more Advanced Usages, please check the demo page or visit the official website.