[Resolved] Popup/modal box in pure CSS

Home Forums Support Popup/modal box in pure CSS

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1470644
    Anders

    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?

    #1470649
    David
    Staff
    Customer Support

    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.

    #1470652
    Anders

    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>
    #1470683
    David
    Staff
    Customer Support

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

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

    #1470686
    Anders

    ah.. sorry..

    #1470704
    David
    Staff
    Customer Support

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.