Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Link to a pure CSS modal already 'poppedup' › Reply To: Link to a pure CSS modal already 'poppedup'

April 10, 2016 at 8:29 am #240367
j7f4f2a4fds2
Participant

Hi


@Beverleyh

@Atelierbram

Firstly thanks for your responses and they are working in the examples that you have linked, however when I try to apply it to my page, following @Beverleyh suggestion, it doesn’t work.

Any suggestions? Thanks again!

Here is my reduced test case:

<html>
  <head>
     <style>
    /*modals*/
.modal .overlay~*{position:relative;box-shadow:0;border-radius:.0em;border:1px solid #ccc;overflow:hidden;text-align:left;background:white;margin-bottom:.6em;}
.modal>input{display:none}
.modal>input~*{opacity:0;max-height:0;overflow:hidden}
.modal .overlay{top:0;left:0;bottom:0;right:0;position:fixed;margin:0;border-radius:0;background:rgba(17,17,17,.6);opacity:80%;transition:ease 1s;z-index:99}
.modal .overlay:after,.modal .overlay:before{display:none;}
.modal .overlay~*{border:0px solid #ccc;position:fixed;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%) scale(.2,.2);transform:translateX(-50%) translateY(-50%) scale(.2,.2);transition:all 0s;padding:10px; z-index:10000;}
.modal>input:checked~*{display:block;opacity:1;max-height:10000px;transition:ease 1s}
.modal>input:checked~.overlay~*{max-height:90%;overflow:auto;-webkit-transform:translateX(-50%) translateY(-50%) scale(1,1);transform:translateX(-50%) translateY(-50%) scale(1,1);transition:all .1s}
</style>
  </head>
  <body>
    <div class="isotope">
      <!--open isotope-->

      <label for="modal_01">
        <div class="item" id="switch">
          Modal
        </div>
      </label>

      <div class="modal">
        <input id="modal_01" type="checkbox" />
        <label for="modal_01" class="overlay"></label>
        <article class="content">
          <label for="modal_01" class="close">×</label>
          <section class="content">
            popup
          </section>
        </article>
      </div>
    </div>
    <!--close isotope-->
    <!--link to popup-->
    <script>
      if (window.location.hash.substr(1) == 'modal_01') {
        getElementById('modal_01').checked = true
      }
    </script>
  </body>
</html>