- 
+
<button data-odo-dialog-open="default">Open the default dialog</button>
<!-- Could be elsewhere in your markup -->
@@ -105,25 +103,45 @@ A shoreline in Vancouver, Canada
</div>
</div>const defaultDialog = new OdoDialog(document.getElementById('default'));const defaultDialog = new OdoDialog(document.getElementById('default'));The opened event is triggered when the content has finished its transition in, while the closed event triggers once the dialog has completely transitioned out.
+The opened event is triggered when the content has finished its transition in, while the closed event triggers once the dialog has completely transitioned out. In case you need to retrieve some information from the button which triggered the dialog to open, you can subscribe to the TRIGGER_CLICKED event.
defaultDialog.on(OdoDialog.EventType.OPENED, function () {
console.log('default dialog opened');
});
defaultDialog.on(OdoDialog.EventType.CLOSED, function () {
console.log('default dialog closed');
-});defaultDialog.open();
-defaultDialog.close();
-defaultDialog.dispose();
-defaultDialog.getByClass(className);defaultDialog.open() // Open the dialog
+defaultDialog.close() // Close the dialog
+defaultDialog.dispose() // Close the dialog, remove event listeners and element references
+defaultDialog.getByClass(className) // Find a single element by class inside the dialogdefaultDialog.element // Base element
+defaultDialog.options // options object
+defaultDialog.id // Unique id for the dialog. Same as the id attribute of the base element
+defaultDialog.isOpen // Whether the dialog is currently openIf you create a subclass of OdoDialog, you will have access to these as well*.
+ +defaultDialog.onClick(evt) // Delegated click handler on the dialog.
+defaultDialog.onKeyPress(evt) // Listens for the ESC key and traps the TAB key.
+defaultDialog.onResize(viewportHeight) // Sets the height of the dialog on viewport resize.
+defaultDialog.content // Dialog content (role=document)
+defaultDialog.backdrop // The background behind the dialog
+defaultDialog.isAnimating // Whether the dialog is currently animating (opening/closing)
+*Because this is JavaScript, you have access to them already.
In addition to the default fade/scale transition, OdoDialog comes with two other transitions: odo-dialog--fade and odo-dialog--zoom-in. The other options in the <select> below are custom transitions added to this page. See the next section for details.
You can add your own transitions too.
OdoDialog follows a similar transition sequence to Vue.js transition effects.