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
Open ajax modal
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
This content will be displayed in modal
Content modal
Create a link to modal
Open simple content modal
Add modal to source
<!-- Content modal --> Modal Title Intro text Body text
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:
;
Configure what actions closes modal
Just create window.rkdModal
global object and set config as you wish.
windowrkdModal = 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.