Modals in Kickstart are unique in that their backdrop and containers are one HTML element. This makes working with modals in JavaScript incredibly straightforward.

JavaScript

Turn any element into a modal using k$.modal()

// Instantiate and assign your modal in one line.
var $signup = k$.modal(".signup");

<div class="modal signup">
  ...
</div>

// Show modal
$signup.style.display = 'block'

// Hide modal
$signup.style.display = 'none'

<div class="signup">
  ...
</div>

.signup { 
  @include modal();
}

// Show modal
$($signup).show();

// Hide modal
$($signup).hide();

Events

Stopping propagation on any click you don't wish to close the modal is required.

Notice the e (event) in the function params as well as e.stopPropagation(). This is to prevent "event bubbling," which would cause JavaScript to think you are both clicking on the modal and clicking outside of it (which would close the modal.)

$('button').click(function(e) {
  $($modal).show();
  e.stopPropagation();
});

$button = document.querySelector('#myButton');

$button.addEventListener('click', function(e) {
  $modal.style.display = 'block';
  e.stopPropagation();
})

Styling

For default modal styling (not required to function), just include modal() use the .modal class.

<div class="myModal">
  <h1>Hello</h1>
</div>

.myModal {
  @include modal();
}

<div class="modal">
  <h1>Hello</h1>
</div>

By default, the modal doesn't come with much styling. This is to allow for more creativity in styling the contents.

However, by structuring the direct children as HTML5 header, main, and footer, the modal will take on some clean styling for showing as a window.

<aside class="modal">
  <header>
    <h1>How would you like to pay?</h1>
    <a data-modal-close="true" href="#">&times;</a>
  </header>
  <main>
    <p>Please make a selection</p>
    <ul>
      <li>
        <a href="#">Visa</a>
      </li>
      <li>
        <a href="#">Mastercard</a>
      </li>
      <li>
        <a href="#">American Express</a>
      </li>
    </ul>
  </main>
  <footer>
    <ul>
      <li>
        <a class="button" role="button" href="#">Cancel</a>
      </li>
      <li>
        <a class="button button-primary" role="button" href="#">Next &raquo;</a>
      </li>
    </ul>
  </footer>
</aside>

.modal {
  @include modal();
}