Minimalist Popup Layer Plugin With jQuery
File Size: | 4.98 KB |
---|---|
Views Total: | 909 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

An extremely lightweight jQuery popup layer plugin designed for Modal windows & dialog boxes that supports 3 trigger events: hover, click and double click.
How to use it:
1. Load the latest version of jQuery library (slim build is recommended) and the jQuery Popup Layer plugin's script in the document.
<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="jquery-pop-up-layer.js"></script>
2. Attach the main function Layer
to a trigger element and specify the popup content & trigger event as this:
$("#btn").Layer({ text: "click event", event: "click" }); $("#btn2").Layer({ text: "mouseover event", event: "mouseover" }); $("#btn3").Layer({ text: "dblclick event", event: "dblclick" });
3. Style the popup layer whatever you like:
.layer { width: 250px; padding: 20px; border: 1px solid #ccc; border-radius: 5px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #fff; } .layer h2 { font: 400 20px/2em 'Roboto'; text-align: center; border-bottom: 1px solid #ccc; margin-bottom: 12px; } .layer p { font-size: 16px; } .layer input { display: block; margin: 10px auto 0; cursor: pointer; width: 100px; height: 30px; line-height: 30px; border: none; border-radius: 5px; background: #000; color: #fff; }
4. Customize the popup template:
var html = '<div class="layer">' + '<h2>Popup Layer</h2>' + '<p>{{text}}</p>' + '<input type="button" value="ok">' + '</div>';
This awesome jQuery plugin is developed by winwangqi. For more Advanced Usages, please check the demo page or visit the official website.