Pure CSS Bootstrap Modal

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

Launch demo modal

The above demo apply the technique of Semantic UI modal [2] to Bootstrap modal.

The following is the source code for above demo.

HTML:

<!-- you can put the following line in your html head -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<!-- Pseudo-Button trigger modal -->
<label type="button" class="btn btn-primary" for="element-toggle">
  Launch demo modal
</label>
<input id="element-toggle" type="checkbox" />

<!-- Modal -->
<div class="modal fade show" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <label for="element-toggle" type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </label>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <label for="element-toggle" type="button" class="btn btn-secondary" data-dismiss="modal">Close</label>
      </div>
    </div>
  </div>
</div>

The modal trigger consists of visible label and invisible input checkbox elements. We apply .btn class to the label element to make it look like a button. The Close and × 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 ~ #exampleModal {
  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 69.0.3497.81 on Ubuntu 18.04 (64-bit)
Bootstrap 4.1.3

References:

[1]	Bulma Modal with Pure CSS Toggle

[2]	Pure CSS Semantic UI Modal