Free to use, open source jQuery plugin which provides customizable Pop-up/Dialog components in just 2 lines of code. Has a stylesheet for the component, but custom styling is also possible.
A demo can be found on CodePen, which shows how a project that uses popup-js might implement it.
The following intructions will provided the knowledge needed to import and implement popup-js into your project. They will only cover basic topics, for users who want to get the plugin up and working as soon as possible.
This component is a jQuery plugin, thus needing it in order to work. You can either download it from here or import it from a CDN.
In the head of your HTML page include it as before this component's .js, as follows:
<head>
<script src="jquery-3.3.1.min.js"></script>
...
<script src="popup-js.js"></script>
</head>You could either clone/download this repository or use the links of the raw files to mimic a CDN in your project. After you imported jQuery, the next thing is to import popup-js.js as follows:
<script src="popup-js.js"></script>You could (and should) also include the stylesheet of the Popup component, like so:
<link rel="stylesheet" type="text/css" href="popup-js.css" />Using popup-js is as easy as calling the .popup(...) function and storing its result in a variable. Then, whenever you want to display the popup, you can call .openPopup() on that object.
For example, add in the page's script (or in <script>) an empty query and then call .popup(...):
<script>
let myPopup = $().popup(...);
</script>This creates a popup that uses the default settings (see docs). In order to display it, a trigger is required. For example, a button which calls .openPopup(), as such:
<button onclick="myPopup.openPopup()">Open Popup</button>That's it. You now have a working popup. Of course, it contains junk data, which is not very useful, is it? Here is a quick way to add content to the popup, by adding parameters to the .popup() call:
<script>
let myPopup = $().popup({
title: "My title",
content: "My content"
});
</script>Those two parameters can also receive raw html:
<script>
let myPopup = $().popup({
title: "<h3>My title</h3>",
content: "<div class='my-class'>My <span style='font-style: italic;'>content</span></div>"
});
</script>There is a lot more you can do with popup-js. To see all of the options and more tutorials, see the documentation.
- jQuery - main framework used
- Filip Dutescu - @filipdutescu
This project is licensed under the MIT License - see the LICENSE.md file for details