Kodhus provides following types to be used within your web pages.
Dialogs are usually used when you want to get a confirmation from user or want to show an important message that needs a high attention.
To use Kodhus dialog library, use the following Markup:
<button class="cdt-btn cdt-btn-primary cdt-btn-large cdt-btn-rounded" data-dialog='#dialog'>Open Dialog</button> <div id="dialog" class="cdt-dialog-container"> <div class="cdt-dialog"> <header> <h6>Dialog header</h6> </header> <main> <div class="content"> Dialog Content </div> </main> <div class="actions"> <button class="cdt-btn cdt-btn-transparent" data-close="true">Close</button> <button class="cdt-btn cdt-btn-transparent">Submit</button> </div> </div> </div>
Let's take a look at an example:
Flexi Dialog (Full screen dialog)
Kodhus provides full screen modals or as we call it, flexi modals. you only need to provide
.flexi class to the div with class
Take a look at following example:
Alerts and notifications are visual feedbacks to the user based on an action. This action could be a click of a button or loading asyncronous data from backend.
To Use alerts/notifications, use the following snippet:
<div class="cdt-notification"> <span class="message">Notification/Alert message here</span> <span class="action">action</span> </div>
You can choose to do anything you want in place of the action. A link, a button and your own action of course.
Following is an example of how it looks:
Tip: If you don't add any actions inside the span with
.actionclass and add
.closeto the same element, Kodhus library will add a close icon that when clicked, it will close that notification. Take a look at the following example:
You can also add your own text instead of Kodhus close icon. You only need to add
data-close="true" as an attribute to the tag that triggers the close action.