Modal

Modals are dialogs which can be used for forms, notifications, lightboxes, and other custom content. Modals in Halfmoon require no JavaScript. However, they can be used with JavaScript as well.

Click on the following button to open a demo modal.

Open modal
<!-- First comes the modal -->
<div class="modal" id="modal-1" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <a href="#" class="close" role="button" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </a>
      <h5 class="modal-title">Modal title</h5>
      <p>
        This is the modal content. Almost any type of content can be presented to the user here.
      </p>
      <div class="text-right mt-20"> <!-- text-right = text-align: right, mt-20 = margin-top: 2rem (20px) -->
        <a href="#" class="btn mr-5" role="button">Close</a>
        <a href="#" class="btn btn-primary" role="button">I understand</a>
      </div>
    </div>
  </div>
</div>

<!-- Page wrapper -->
<div class="page-wrapper">
  <!-- Modal toggle inside the content wrapper -->
  <div class="content-wrapper">
    ...
    <a href="#modal-1" class="btn btn-primary" role="button">Open modal</a>
    ...
  </div>
</div>

<!-- Optional. Required for modals to be dismissible by clicking on overlays, or pressing the [esc] key. -->
<script src="path/to/halfmoon.js"></script>

How it works

Here's a list of things to understand about modals in Halfmoon.

  • Modals make use of the :target pseudo-selector. In other words, they open whenever the hash in the URL matches the ID of the modal. For this reason, the toggle button is simply a link to the modal's ID.
  • Because of the above point, the close buttons are simply just links that reset the hash of the URL. The main close button (with the class .close) must be a child of the element with the class .modal-content.
  • Although not required, modals should ideally be defined before the page wrapper (.page-wrapper). You can learn more about this in the page building section (opens in new tab) of the docs.
  • The .modal-title class can be used to create typographical hierarchies within the modals.
  • Almost any type of content can be placed inside modals. We highly recommend checking out all the examples in this page to see the different ways modals can be used.

Using forms #

Forms can also be used inside modal dialog boxes. The next example shows one such modal.

Click on the following button to see a modal with a form.

Sign in
<!-- First comes the modal -->
<div class="modal" id="modal-2" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <a href="#" class="btn close" role="button" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </a>
      <h5 class="modal-title">Sign in to your account</h5>
      <form action="..." method="...">
        <div class="form-group">
          <label for="username" class="required">Username</label>
          <input type="text" id="username" class="form-control" placeholder="Username" required="required">
        </div>
        <div class="form-group">
          <label for="password" class="required">Password</label>
          <input type="password" id="password" class="form-control" placeholder="Password" required="required">
        </div>
        <input class="btn btn-primary btn-block" type="submit" value="Sign in">
      </form>
      <div class="text-right mt-10"> <!-- text-right = text-align: right, margin-top: 1rem (10px) -->
        <a href="#modal-2" class="hyperlink">Forgot password?</a> <!-- hyperlink = used on regular links to remove anti-aliasing in dark mode --> 
      </div>
    </div>
  </div>
</div>

<!-- Page wrapper -->
<div class="page-wrapper">
  <!-- Modal toggle inside the content wrapper -->
  <div class="content-wrapper">
    ...
    <a href="#modal-2" class="btn btn-primary" role="button">Sign in</a>
    ...
  </div>
</div>

<!-- Optional. Required for modals to be dismissible by clicking on overlays, or pressing the [esc] key. -->
<script src="path/to/halfmoon.js"></script>

Scrollable modals #

The next example shows a modal with a lot of content, which makes it scrollable.

Click on the following button to see a modal that can be scrolled.

Long and scrollable content
<!-- Long scrollable content in the modal -->
<div class="modal ie-scroll-fix" id="modal-3" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content w-600"> <!-- w-600 = width: 60rem (600px) -->
      <a href="#" class="close" role="button" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </a>
      <!-- Long scrollable content here -->
      ...
    </div>
  </div>
</div>

<!-- Page wrapper -->
<div class="page-wrapper">
  <!-- Modal toggle inside the content wrapper -->
  <div class="content-wrapper">
    ...
    <a href="#modal-3" class="btn" role="button">Long and scrollable content</a>
    ...
  </div>
</div>

<!-- Optional. Required for modals to be dismissible by clicking on overlays, or pressing the [esc] key. -->
<script src="path/to/halfmoon.js"></script>

Images and videos #

Images and videos can also be placed inside modals. The following example is an image magnifier. Note the .modal-content-media class, which removes the card like styling, so it can be used effectively to display media.

Click the image to enlarge

modal-img-thumbnail
<!-- Modal containing the image -->
<div class="modal" id="modal-4" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content modal-content-media w-500"> <!-- w-500 = width: 50rem (500px) -->
      <a href="#" class="close" role="button" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </a>
      <img src="..." class="img-fluid" alt="modal-img">
    </div>
  </div>
</div>

<!-- Page wrapper -->
<div class="page-wrapper">
  <!-- Modal toggle inside the content wrapper -->
  <div class="content-wrapper">
    ...
    <a href="#modal-4">
      <img src="..." class="img-fluid rounded" width="100" alt="modal-img-thumbnail">
    </a>
    ...
  </div>
</div>

<!-- Optional. Required for modals to be dismissible by clicking on overlays, or pressing the [esc] key. -->
<script src="path/to/halfmoon.js"></script>

Full-screen modals #

Full-screen modals can be created by adding the class .modal-full to the modal. The card placed inside it will automatically be formatted to be a page on top of the main page.

Click on the following button to open an article in a full screen modal.

Full-screen modal
<!-- Full-screen modal -->
<div class="modal modal-full ie-scroll-fix" id="modal-5" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <a href="#" class="close" role="button" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </a>
      <div class="container">
        <div class="row">
          <div class="col-md-8 offset-md-2">
            <!-- Article here -->
            ...
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Page wrapper -->
<div class="page-wrapper">
  <!-- Modal toggle inside the content wrapper -->
  <div class="content-wrapper">
    ...
    <a href="#modal-5" class="btn btn-primary" role="button">Full-screen modal</a>
    ...
  </div>
</div>

<!-- Optional. Required for modals to be dismissible by clicking on overlays, or pressing the [esc] key. -->
<script src="path/to/halfmoon.js"></script>

JavaScript usage #

All the modals showcased above can also be used with JavaScript, instead of using the :target selector. Using JavaScript, modals are toggled in the following ways:

  • Clicking an element with the data-toggle="modal" and data-target="modalId" attributes.
  • Calling the built-in method halfmoon.toggleModal(modalId). For example, the method can be called using onclick(). All this method does is add/remove the class .show to/from the modal.

Modals can be dismissed using JavaScript by clicking on an element with the attribute data-dismiss="modal". Therefore, this attribute is used on the close buttons in the following example. They can also be dismissed by calling the halfmoon.toggleModal(modalId) again (with the modal open).

The following buttons can be used to toggle the same modal using JavaScript. The first one uses the attribute, the second one uses the built-in method.

<!-- JavaScript based modal -->
<div class="modal" id="modal-6" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <button class="close" data-dismiss="modal" type="button" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      <h5 class="modal-title">Modal title</h5>
      <p>
        This is the modal content. Almost any type of content can be presented to the user here.
      </p>
      <div class="text-right mt-20"> <!-- text-right = text-align: right, mt-20 = margin-top: 2rem (20px) -->
        <button class="btn mr-5" data-dismiss="modal" type="button">Close</button>
        <button class="btn btn-primary" data-dismiss="modal" type="button">I understand</button>
      </div>
    </div>
  </div>
</div>

<!-- Page wrapper -->
<div class="page-wrapper">
  <!-- Modal toggles inside the content wrapper -->
  <div class="content-wrapper">
    ...
    <button class="btn" data-toggle="modal" data-target="modal-6">Using attribute</button>
    <button class="btn btn-primary" onclick="halfmoon.toggleModal('modal-6')">Using method</button>
    ...
  </div>
</div>

<!-- Requires halfmoon.js -->
<script src="path/to/halfmoon.js"></script>

Disabling other dismissal methods #

As mentioned above, modals can also be closed by clicking on the overlay, or pressing the esc key. However, these dismissal methods can be disabled using the following attributes:

  • data-overlay-dismissal-disabled="..." which stops the modal from being dismissed by clicks on the overlay.
  • data-esc-dismissal-disabled="..." which stops the modal from being dismissed by the esc key press.

This can be useful for modals that display content requiring urgent attention from the user.

Click on the following button to see a modal that can only be dismissed by clicking on one of the close buttons.

Open modal
<!-- Modal that can not be closed by clicking on the overlay, or pressing the [esc] key -->
<div class="modal" id="modal-7" tabindex="-1" role="dialog" data-overlay-dismissal-disabled="true" data-esc-dismissal-disabled="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <a href="#" class="close" role="button" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </a>
      <h5 class="modal-title">Modal title</h5>
      <p>
        This modal can not be closed by clicking on the overlay, or pressing the <kbd>esc</kbd> key.
      </p>
      <div class="text-right mt-20"> <!-- text-right = text-align: right, mt-20 = margin-top: 2rem (20px) -->
        <a href="#" class="btn mr-5" role="button">Close</a>
        <a href="#" class="btn btn-primary" role="button">I understand</a>
      </div>
    </div>
  </div>
</div>

<!-- Page wrapper -->
<div class="page-wrapper">
  <!-- Modal toggle inside the content wrapper -->
  <div class="content-wrapper">
    ...
    <a href="#modal-7" class="btn btn-primary" role="button">Open modal</a>
    ...
  </div>
</div>

<!-- Optional. Required for modals to be dismissible by clicking on overlays, or pressing the [esc] key. -->
<!-- However, the dismissal methods have been disabled by the attributes on the modal here. -->
<script src="path/to/halfmoon.js"></script>

Up next: Pagination

Coming soon

  • More components
  • More variables and customization
  • Form builder and validator JS
  • Themes and templates

Subscribe for updates


  • We will notify you when the framework gets a substantial update. No spam or marketing.
  • You can also follow us on Twitter and stay updated that way.