button-popup-modal
v1.0.3
Published
Open a modal with a single button click.
Readme
Button Popup Modal
A simple and customizable modal popup for your web applications. This modal allows you to display popups with dynamic content and action buttons such as "Cancel" and "Book".
Installation
Install the package using npm:
npm install button-popup-modalUsage
Once the package is installed, you can integrate the modal into your project as follows:
1. Import and Initialize the Modal in JavaScript
In the <body> section of your HTML, import the modal.js file and initialize the modal with the required data.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal Example</title>
</head>
<body>
<script type="module">
import Modal from "https://cdn.jsdelivr.net/npm/button-popup-modal@latest/modal.js";
const myModal = new Modal(
{
heading: "Booking Details",
Name: "John Doe",
Date: "25th Feb 2025",
Time: "10:00 AM",
},
"Cancel",
"Confirm"
);
</script>
</body>
</html>Customization
- Data Object: Pass an object as the modal's content, such as
{ DoctorName: "Roy", available: "Yes" }. This will display the doctor's name and availability in the modal. - Button Text: The second and third arguments of the
Modalconstructor define the button texts. In the example above, the modal will display "Cancel" and "Book".
Example Output
The modal will display:
Doctor Name: Roy
Availability: Yes
[Cancel] [Book]Development
To contribute or modify this package:
- Clone this repository to your local machine.
- Run
npm installto install the dependencies. - Make the desired changes to the modal functionality.
- Test the modal in your local project.
- Submit a pull request with your improvements.
License
This project is licensed under the MIT License.