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'

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 10, 2016 at 3:41 am #240351
    j7f4f2a4fds2
    Participant

    Hi All,

    I am using a pure css template for modal popups. I would like to know how to make a link to an already ‘poppedup’ modal so I can share it.

    Thanks

    https://jsfiddle.net/postcolonialboy/t07ut6nd/2/

    HTML

    <label for="modal1">OPEN</label>
<input type="checkbox" class="modal" id="modal1">
<div class="modal">
  <article>
    <p>Modal content here!</p>
  </article>
  <label for="modal1" class="close"></label>
  <label for="modal1" class="overlay"></label>
</div>

    CSS

    label {
  color: #00f;
  text-decoration: underline;
  cursor: pointer
}

.modal,
.modal * {
  box-sizing: border-box;
  -moz-box-size: border-box;
  transition: all .2s ease-in-out
}

.modal:checked+.modal {
  opacity: 1;
  pointer-events: all
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 500;
  padding: 15px;
  overflow-y: scroll;
  opacity: 0;
  pointer-events: none
}

.modal article {
  background: #fff;
  width: 100%;
  padding: 50px;
  position: relative;
  z-index: 700
}

.modal .close:before {
  content: '×';
  display: block;
  padding: 20px 30px;
  font-size: 200%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 800;
  cursor: pointer
}

.modal .close:hover:before {
  color: #c00
}

.modal .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  z-index: 600;
  cursor: pointer
}
    April 10, 2016 at 4:02 am #240353
    Beverleyh
    Participant

    You couldn’t do it with CSS alone, but you could with JavaScript – maybe with a unique hash at the end of the page url?

    Link from another page/your share url, in this format = http://my website.com/page.htm#modal1 (the hash value is the same as the checkbox id)

    Then put this in the page containing the modal – above </body>;

    <script>
if (window.location.hash.substr(1) == 'modal1') { document.getElementById('modal1').checked = true }
</script>

    I haven’t tested it but it should work.

    April 10, 2016 at 4:18 am #240354
    Beverleyh
    Participant

    Yup, works fine http://output.jsbin.com/devukesafa#modal1

    April 10, 2016 at 4:25 am #240355
    Atelierbram
    Participant

    @beverleyh tested it and it works : thanks for that!


    @j7f4f2a4fds2     in order to test is you have to make an account on CodePen and view it in “debug” mode with the #modal1 attached to the url, or just see the one by Beverleyh

    This also will work with the jquery hashchange plugin, but if you going for light-weight, this may be overkill, but anyway here is a demo.

    .modal:checked+.modal,
.modal:target {
  opacity: 1;
  pointer-events: all
}
    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:

    &lt;html&gt;
  &lt;head&gt;
     &lt;style&gt;
    /*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&gt;input{display:none}
.modal&gt;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&gt;input:checked~*{display:block;opacity:1;max-height:10000px;transition:ease 1s}
.modal&gt;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}
&lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="isotope"&gt;
      &lt;!--open isotope--&gt;

      &lt;label for="modal_01"&gt;
        &lt;div class="item" id="switch"&gt;
          Modal
        &lt;/div&gt;
      &lt;/label&gt;

      &lt;div class="modal"&gt;
        &lt;input id="modal_01" type="checkbox" /&gt;
        &lt;label for="modal_01" class="overlay"&gt;&lt;/label&gt;
        &lt;article class="content"&gt;
          &lt;label for="modal_01" class="close"&gt;&times;&lt;/label&gt;
          &lt;section class="content"&gt;
            popup
          &lt;/section&gt;
        &lt;/article&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--close isotope--&gt;
    &lt;!--link to popup--&gt;
    &lt;script&gt;
      if (window.location.hash.substr(1) == 'modal_01') {
        getElementById('modal_01').checked = true
      }
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
    April 10, 2016 at 8:47 am #240369
    Atelierbram
    Participant

    Javascript syntax thing, it should be document.getElementById

    April 10, 2016 at 9:05 am #240370
    j7f4f2a4fds2
    Participant

    @Atelierbram
    great, now working! Thanks again.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.