1.0.7 • Published 3 years ago

@ozcanarican/modal v1.0.7

Weekly downloads
-
License
ISC
Repository
github
Last release
3 years ago

Installation

demo

In your root folder, run following command

npm install @ozcanarican/modal

add CSS link in the head tag

<head>
    <link rel="stylesheet" href="/node_modules/@ozcanarican/modal/css/modal.css">
</head>

add JS link to footer

<body>
    .
    .
    .
    <script src="/node_modules/@ozcanarican/modal/modal.js"></script>
</body>

Usage

Adding Modal

In following example, show a standart modal with countdown featured button. This button wont be able to fire click event until user waits exact time which is declared in data-time field.

<div class="modal" id="testmodal" type="yok">
        <div class="content">
            <div class="header">
                This is your test title
            </div>
            <div class="body">
                Your content goest here
            </div>
            <div class="buttons">
                <button class="modal-cancel">Cancel</button>
                <button class="modal-countdown" data-time="6">Delete</button>
            </div>
        </div>
    </div>

Calling Modal

Your modal can be called by any DOM element like following example;

<span class="modal-button" data-target="testmodal">Click Me!</span>

A dom element with modal-button class, must have data-target element as well.

Adding callback function to countdown button

The following example shows how to add custom events.

const callback = () => {
    alert("Hello World!")
}
addDefaultEvents({target:"testmodal", callback: callback})
1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago