Popup/modal box in pure CSS

Hi there,

that code won't work with a GB Button ( or any button ).

If you look at the HTML you will see this:

<label class="btn" for="modal-1">Show me modal with a cat</label>

Which is styled like a Button.
This in turn triggers the checkbox:

<input class="modal-state" id="modal-1" type="checkbox">

You would to follow those steps to make that work - ie. its all Custom HTML.

ok so I need to change this code?

<input class="modal-state" id="modal-1" type="checkbox">
<div class="modal">
  <label class="modal__bg" for="modal-1"></label>
  <div class="modal__inner">
    <label class="modal__close" for="modal-1"></label>
    <h2>Caaaats FTW!</h2>
    <p><img src="https://i.imgur.com/HnrkBwB.gif" alt="" />Aliquam in sagittis nulla. Curabitur euismod diam eget risus venenatis, sed dictum lectus bibendum. Nunc nunc nisi, hendrerit eget nisi id, rhoncus rutrum velit. Nunc vel mauris dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam fringilla quis nisi eget imperdiet.</p>
  </div>
</div>

No. You need to replace the Button with this HTML:

<label class="btn" for="modal-1">Show me modal with a cat</label>

ah.. sorry..

No problems... you effectively need to use ALL that HTML for it to work correctly.