Modal

Kodhus provides following types to be used within your web pages.

Dialog

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

Take a look at following example:

Alerts/Notifications

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.

Usage

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>
    

Note:

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.