Dialog
In order to make dialog works, add these files. assets/css/rdta/components/rdta-dialog.css, assets/js/rdta/components/rdta-dialog.js
Then enable its functional.
document.addEventListener('DOMContentLoaded', function() {
RDTADialog.init();
});Examples
Below is the basic dialog element showing how it looks like. It's included dialog header, body, and footer (optional).
Dialog header
The basic dialog.
source
Use HTML <dialog>
Example below use HTML <dialog>.
(See reference.)
source
Live demo
The example below is non-modal dialog. It use the basic dialog.
Dialog with modal
The example below is modal dialog. To open dialog with modal (backdrop), wrap the dialog with element that contain class rd-dialog-modal.
Dialog with modal
The modal dialog with backdrop.
source
HTML <dialog> with modal
source
Long paragraph
Long paragraph
Feugiat dictum proin tellus integer ridiculus tempor scelerisque nascetur auctor. Taciti ad ultrices mattis habitant parturient aenean phasellus proin dignissim est? Mauris curae; erat nisl pulvinar inceptos egestas sociosqu convallis. Platea; condimentum molestie ut curabitur porta imperdiet. Viverra venenatis tristique nullam. Taciti nascetur torquent aptent vehicula curae; fames phasellus habitasse nostra eleifend potenti. Tellus cum in tempus, accumsan at. Tincidunt lectus, fringilla nam. Mattis pretium ornare, porttitor consequat pharetra interdum ac non malesuada. Netus, vulputate porta velit id vestibulum dictumst netus.
Porttitor maecenas pulvinar vel cursus urna conubia elit. Imperdiet nunc mattis vestibulum senectus at. Mattis, morbi quam gravida mauris fames morbi curabitur eleifend. Imperdiet dui nostra auctor rutrum tincidunt tortor dis porttitor hendrerit adipiscing, duis vivamus. Felis urna ac arcu risus cubilia amet ante venenatis etiam. Molestie malesuada eros primis ligula parturient malesuada blandit. Consectetur nisl commodo ante habitasse urna magnis nec nulla.
Dignissim ad sed vitae aptent viverra lobortis? Facilisis convallis dui faucibus iaculis imperdiet vulputate volutpat habitasse purus, natoque penatibus taciti. Cras ac dis ultricies volutpat in dictumst eros, elit dictum tellus sit felis. Praesent mus vitae ac cum eu ultrices? Aliquet hendrerit habitasse curabitur faucibus imperdiet imperdiet enim. At sit netus nascetur laoreet quam eleifend. Proin consequat eleifend duis est.
Augue ullamcorper libero leo. Ante purus donec aenean elit dapibus. Semper gravida lobortis morbi libero cursus commodo viverra accumsan inceptos sodales? Tristique at donec eros cum dictumst mollis primis blandit curabitur duis purus. Nisi tincidunt justo curae;. Justo aenean maecenas ligula lacinia etiam non placerat dis. Nunc tempus cubilia aptent dignissim porttitor mollis porttitor netus tempor sociosqu nascetur molestie. Duis torquent enim mauris at blandit mauris aliquet curae; sociosqu vehicula cubilia.
In duis conubia mattis mattis elementum suspendisse metus. Ullamcorper tincidunt enim ligula semper dolor! Gravida natoque quis mus velit urna metus tincidunt aliquam potenti risus sodales! Non id sollicitudin quis turpis habitasse. Sociosqu ac vitae congue varius per augue venenatis tempor. Porttitor quisque risus nostra. Hac duis quis litora dis nisi pretium. Aliquet montes.
Nulla pharetra rutrum varius. Vestibulum quis nisl ut tortor ullamcorper mattis quis ultrices dui. Praesent eu turpis lobortis, finibus lorem sed, finibus odio. In eleifend cursus sem, et suscipit dui ornare id. Vestibulum velit diam, auctor non lacinia mollis, vehicula quis urna. Nullam leo arcu, dignissim at turpis sed, maximus sollicitudin tortor. Fusce vulputate leo diam, a luctus metus suscipit a. Nam tristique eros quis risus imperdiet, in tempus eros mollis. Aenean scelerisque dolor ac urna placerat, ut placerat leo fermentum. Sed mattis magna eu leo eleifend pharetra. Duis est nisl, varius et neque non, elementum tempor libero. Aenean vitae mi eu est bibendum dignissim vitae at nunc. Maecenas luctus leo eget tortor finibus varius. Aenean nec ipsum at quam maximus scelerisque vitae at diam.
Curabitur condimentum nulla velit, vel aliquet mauris semper a. Duis suscipit lectus nec urna feugiat gravida. Quisque commodo bibendum nibh in molestie. Vivamus tincidunt, massa non blandit suscipit, mauris orci tempor justo, ut sollicitudin nunc ante et diam. Etiam tempus sem vitae tincidunt gravida. Aliquam erat volutpat. Morbi mattis leo a ex ullamcorper, sed faucibus risus consectetur. Nulla volutpat pretium dolor, vitae cursus felis fringilla a. Cras et aliquam lectus. Morbi sit amet ultrices ipsum. Aliquam eu velit urna. Donec volutpat tempus ornare.
In hac habitasse platea dictumst. Suspendisse potenti. Donec in laoreet arcu. Nunc ut turpis ac velit aliquet laoreet. Duis gravida, justo vel rutrum varius, purus eros aliquam nulla, rhoncus ullamcorper lectus leo id mi. Aliquam erat volutpat. Quisque at fringilla tortor. Phasellus ut fringilla nisl, ac molestie enim. Vestibulum sagittis odio accumsan laoreet blandit. Aliquam in bibendum tellus. In quis lobortis nisl. Nulla venenatis magna a orci hendrerit dictum. Vestibulum ac neque leo. Phasellus lacinia purus mi. Donec commodo libero id euismod tincidunt.
Disable close on click outside the dialog
Add data-click-outside-not-close="true" HTML attribute into the modal element to disable close on click outside the dialog box.
Disable close on click outside the dialog
…
source
<div id="my-dialog" class="rd-dialog-modal" data-click-outside-not-close="true">
<div class="rd-dialog">...</div>
</div>Disable close on press escape key
Add data-esc-key-not-close="true" HTML attribute into the dialog element to disable close on press esc key.
Disable close on click outside the dialog
…
source
<div class="rd-dialog" data-esc-key-not-close="true">...</div>Sizes
Dialog with different sizes by adding rd-dialog-size-xxx into dialog element.
Large dialog
…
Full window dialog
…
source
<div class="rd-dialog rd-dialog-size-large">...</div>
<div class="rd-dialog rd-dialog-size-fullwindow">...</div>Tooltips on modal dialog
Tooltips can be placed on modal dialog.
Manual activate dialog
Use the JavaScript code below to manually activate dialog.
(new RDTADialog).activateDialog('#dialogID');Manual close dialog
Use the JavaScript code below to manually close dialog.
(new RDTADialog).close('#dialogID');The example below, a button does not contain data-toggle="dialog" but use HTML attribute onclick to call JS to open dialog manually.
Manual dialog
Manual trigger open modal dialog. The close button in this dialog also manual trigger close.
Events
RDTA dialog have few events for hooking.
| Event type | Description |
|---|---|
| rdta.dialog.opened | This event is fired when dialog was opened. |
| rdta.dialog.closed | This event is fired when dialog was closed. |
Dialog with modal
Open and then close to see events show up below.