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">
      <h6>Dialog header</h6>
        <div class="content">
          Dialog Content
      <div class="actions">
        <button class="cdt-btn cdt-btn-transparent" data-close="true">Close</button>
        <button class="cdt-btn cdt-btn-transparent">Submit</button>

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 .cdt-dialog.

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>


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 .action class and add .close to 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.