Minimalist Popup Layer Plugin With jQuery

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.