Bulma Modal with Pure CSS Toggle
CSS only toggle Bulma modal. Click the following button to see demo.
The above demo apply the technique of my previous post of pure CSS modal [1] to Bulma modal.
The following is the source code for above demo.
HTML:
<!-- Modal trigger -->
<label class="button" for="element-toggle">Launch Modal</label>
<input id="element-toggle" type="checkbox" />
<!-- Modal -->
<div class="modal" id="myModal">
<div class="modal-background"></div>
<div class="modal-content">
<p class="image is-4by3">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="image modal">
</p>
</div>
<label class="modal-close is-large" for="element-toggle"></label>
</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 Close 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: flex;
}
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.
You might be interested in ...
Tested on:
- Chromium 63.0.3239.132 on Ubuntu 17.10 (64-bit)
- Bulma 0.6.2
References:
| [1] | Pure CSS Modal (Popup) |