Pure CSS Semantic UI Modal

CSS only toggle Semantic UI modal. No JavaScript required. Click the following button to see demo.

The above demo apply the technique of Bulma modal [1] to Semantic UI modal.

The following is the source code for above demo.

HTML:

<!-- Modal trigger -->
<label class="ui button" for="element-toggle">Launch Modal</label>
<input id="element-toggle" type="checkbox" />

<!-- Modal -->
<div class="ui modal" id="myModal">
  <div class="header">Header</div>
  <div class="content">
    <p>Line 1 of Modal Content</p>
    <p>Line 2 of Modal Content</p>
    <p>Line 3 of Modal Content</p>
  </div>
  <div class="actions">
    <label class="ui ok button" for="element-toggle">OK</label>
  </div>
</div>

The modal trigger consists of visible label and invisible input checkbox elements. We apply .button class to the label element to make it look like a button. The OK button in the modal is also a label element. If users click on the label element, the visibility of the modal is toggled.

CSS:

#element-toggle {
  display: none;
}
#element-toggle:checked ~ #myModal {
  display: block;
}

Only two rules in CSS code:

• First rule make input checkbox element invisible.
• Second rule toggles the visibility of the modal when users click on the label elements.

Tested on:

• Chromium 63.0.3239.132 on Ubuntu 17.10 (64-bit)
• Semantic UI 2.2.14

References: