1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Link to a pure CSS modal already 'poppedup'

Discussion in 'CSS' started by 7643sfsag6, Apr 10, 2016.

  1. #1
    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

    Fiddle


    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
    }
    SEMrush
    .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
    }
     
    7643sfsag6, Apr 10, 2016 IP
    SEMrush
  2. 7643sfsag6

    7643sfsag6 Member

    Messages:
    56
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #2
    Fiddle:
    https://jsfiddle.net/postcolonialboy/t07ut6nd/2/
     
    7643sfsag6, Apr 10, 2016 IP
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #3
    You can't - if you want to make a direct link to the modal being open, you'll have to do that either with javascript or server-side, based on the link the user uses. Ie, you'd have to create a specific link for each modal, and if anyone uses that link, the javascript or server side will parse the link and make the input be checked by default.
     
    PoPSiCLe, Apr 10, 2016 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,328
    Likes Received:
    1,821
    Best Answers:
    244
    Trophy Points:
    515
    #4
    Parse it server side... using something like getdata. your.url?open=whatever

    then say the back-end is php, you just:

    
    <input type="checkbox" id="modal1" <?php
      if (array_key_exists('open', $_GET) && $_GET['open'] == 'modal1') echo ' checked';
    ?>>
    
    Code (markup):
     
    deathshadow, Apr 12, 2016 IP