[Resolved] Popup/modal box in pure CSS

[Anders Nielsen]

Hi i’m using generateblocks – and is trying to activate this modalbox with a button.

But for some reason it’s not working.

https://codepen.io/Idered/pen/vytkH

Any idea what I’m doing wrong?

[David]

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.

[Anders Nielsen]

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>

[David]

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

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

[Anders Nielsen]

ah.. sorry..

[David]

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

[Author]

Posts