renekorss/rkd-modal

Plain content and AJAX supported modal.

RKD Modal

Plain content and AJAX supported modal.

Install

npm install rkd-modal

How to use?

See example HTML and JSFiddle.

AJAX modal

Create a link to modal

<a
    href="https://cors.io/?http://example.com/"
    class="rkd-modal-ajax"
    data-rkd-modal-selector="p"
>Open ajax modal</a>

That's it!

Options

data attributes:

• data-rkd-modal-selector (optional): jQuery selector which content will be loaded from requested URL.

Content modal with current item contents

<a href="#" class="rkd-modal-this">This content will be displayed in modal</a>

Content modal

Create a link to modal

<a href="#" class="rkd-modal" data-rkd-modal-id="modal-content">Open simple content modal</a>

Add modal to source

<!-- Content modal -->
<div class="modal" id="modal-content">
    <input class="modal-state" type="checkbox" />
    <div class="modal-fade-screen">
        <div class="modal-inner">
            <div class="modal-close"></div>
            <h1>Modal Title</h1>
            <p class="modal-intro">Intro text</p>
            <p class="modal-content">Body text</p>
        </div>
    </div>
</div>

Options

data attributes:

• data-rkd-modal-id (required): custom modal ID. Must be unique.

Events

Possible events:

• rkd-modal:before:open
• rkd-modal:after:open
• rkd-modal:before:close
• rkd-modal:after:close
• rkd-modal:content:loaded

Events are fired on $(document) object, so listen like this:

$(document).on('rkd-modal:before:open', function(e, $modal) {
    // Do whatever you need
    // $modal is jQuery object representing current modal
});

Configure what actions closes modal

Just create window.rkdModal global object and set config as you wish.

window.rkdModal = {
    escKey: false, // Disable/enable ESC key from closing modal. Default: true
    backgroundClickClose: false // Disable/enable background click from closing modal. Default: true
};

It gets validated on every modal open, so you could change these settings whenever you need.

Customise

You can override any CSS (SCSS) you need to make it your own.

License

MIT