10
Bulma Modal with Pure CSS Toggle
source link: http://siongui.github.io/2018/01/27/css-only-toggle-bulma-modal/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Bulma Modal with Pure CSS Toggle
January 27, 2018
CSS only toggle Bulma modal. Click the following button to see demo.
Launch Modal
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:
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK