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-modal

Usage

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 Modal constructor 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 install to 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.