Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/filipdutescu/popup-js
Open source Pop-up/Dialog component made with jQuery (comes with stylesheet).
https://github.com/filipdutescu/popup-js
customizable dialog-component javascript jquery jquery-plugin popup-box popup-dialog popup-js popup-window webcomponent
Last synced: 28 days ago
JSON representation
Open source Pop-up/Dialog component made with jQuery (comes with stylesheet).
- Host: GitHub
- URL: https://github.com/filipdutescu/popup-js
- Owner: filipdutescu
- License: mit
- Created: 2019-01-24T09:45:50.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-11T21:20:37.000Z (almost 6 years ago)
- Last Synced: 2025-01-04T01:49:43.434Z (about 1 month ago)
- Topics: customizable, dialog-component, javascript, jquery, jquery-plugin, popup-box, popup-dialog, popup-js, popup-window, webcomponent
- Language: JavaScript
- Homepage:
- Size: 49.8 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# popup-js
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.
### Demo
A demo can be found on [CodePen](https://codepen.io/filipdutescu/pen/BMWBPO), which shows how a project that uses `popup-js` might implement it.
## Getting Started
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.
### Prerequisites
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:
````html
...
````
### Importing popup-js
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:
````html
````
---
You could (and should) also include the stylesheet of the Popup component, like so:
````html
````
### Using popup-js
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 ``) an empty query and then call `.popup(...)`:
````html
<script>
let myPopup = $().popup(...);
````
This creates a popup that uses the _default_ settings (see [docs](https://github.com/filipdutescu/popup-js/wiki/Docs)). In order to display it, a trigger is required. For example, a button which calls `.openPopup()`, as such:
````html
Open Popup
````
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:
````html
let myPopup = $().popup({
title: "My title",
content: "My content"
});
````
Those two parameters can also receive raw html:
````html
let myPopup = $().popup({
title: "<h3>My title</h3>",
content: "<div class='my-class'>My <span style='font-style: italic;'>content</span></div>"
});
````
There is a lot more you can do with `popup-js`. To see all of the options and more tutorials, see the [documentation](https://github.com/filipdutescu/popup-js/wiki/Docs).
## Built With
* jQuery - main framework used
## Authors
* **Filip Dutescu** - @filipdutescu
## License
This project is licensed under the MIT License - see the LICENSE.md file for details