CodePen

HTML

            
              <div class="modal">
    <input id="modal" type="checkbox" name="modal" tabindex="1">     
    <label for="modal" >Launch Modal</label>
    <div class="modal__overlay">
        <div class="modal__box"> 
            <label for="modal">&#10006;</label>
            <h2>This is your modal content</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra. Suspendisse in volutpat lacus. In enim est, dapibus eget ipsum sed, suscipit ultrices diam.</p>
        </div>
    </div>
</div>
<div class="wrap">
    <h1>Pure CSS Modal Popup</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra. Suspendisse in volutpat lacus. In enim est, dapibus eget ipsum sed, suscipit ultrices diam. Sed semper, nisl sodales hendrerit porta, justo orci interdum turpis, id iaculis sem ipsum eget turpis. Suspendisse sit amet nibh arcu. Suspendisse pharetra lectus non est tempus euismod. Vivamus dapibus euismod neque, et mattis tellus tincidunt interdum. In hac habitasse platea dictumst. Mauris vitae ante vitae ligula ultrices venenatis at sit amet nibh. Mauris ipsum mauris, pretium ut ipsum nec, sagittis porta erat. Donec varius, lacus nec vulputate tristique, augue erat imperdiet diam, a tempus justo ante at urna. Ut nec eros turpis.</p>

    <p>Nunc vitae ultrices tortor. Cras urna nulla, posuere vehicula rhoncus aliquet, euismod ut tellus. Aliquam eu arcu quis risus auctor finibus. Pellentesque egestas scelerisque pulvinar. Pellentesque erat est, volutpat ac ultrices sit amet, laoreet ac purus. Sed eleifend elit magna, quis euismod neque porttitor in. Curabitur et felis posuere, vestibulum felis nec, accumsan neque. Aenean mattis libero quis lorem porttitor tincidunt. Phasellus porta libero nec sollicitudin posuere. Duis dapibus id eros fermentum iaculis. Sed in nunc viverra, venenatis eros sed, condimentum leo. Vestibulum ut dictum sem.</p>

    <p>Donec metus nibh, condimentum nec vehicula a, porttitor non nisl. Nulla convallis neque tempus neque hendrerit feugiat. Donec et ligula nec nibh sagittis pharetra ac eget magna. Nullam aliquet consequat facilisis. Phasellus convallis nisl vitae neque venenatis, ac tempus nibh tempus. Quisque vestibulum ante tellus, nec gravida leo lobortis id. Donec suscipit semper euismod.</p>

    <p>Nam porta velit eget tortor molestie aliquam. Pellentesque quis est id felis tempor facilisis. Cras et tristique lacus. Fusce sit amet hendrerit nisi. Aenean tincidunt quam sed neque vestibulum mollis. Integer a elit ac est faucibus bibendum id at mauris. Sed ultrices ullamcorper facilisis. Sed eu massa ut turpis finibus volutpat. Morbi finibus fermentum ipsum, nec hendrerit dui luctus in. Sed tincidunt pellentesque massa vel gravida. Aenean mattis justo eget nunc facilisis congue. Praesent a congue massa, sit amet luctus orci. Phasellus porttitor lacus at dignissim interdum. Maecenas porta lectus at augue iaculis, vitae tristique massa efficitur. Fusce ultrices commodo massa.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac laoreet elit. Phasellus dignissim purus vitae urna cursus, quis congue ligula tristique. Ut nec blandit risus. Donec at orci ut justo venenatis viverra. Suspendisse in volutpat lacus. In enim est, dapibus eget ipsum sed, suscipit ultrices diam. Sed semper, nisl sodales hendrerit porta, justo orci interdum turpis, id iaculis sem ipsum eget turpis. Suspendisse sit amet nibh arcu. Suspendisse pharetra lectus non est tempus euismod. Vivamus dapibus euismod neque, et mattis tellus tincidunt interdum. In hac habitasse platea dictumst. Mauris vitae ante vitae ligula ultrices venenatis at sit amet nibh. Mauris ipsum mauris, pretium ut ipsum nec, sagittis porta erat. Donec varius, lacus nec vulputate tristique, augue erat imperdiet diam, a tempus justo ante at urna. Ut nec eros turpis.</p>

    <p>Nunc vitae ultrices tortor. Cras urna nulla, posuere vehicula rhoncus aliquet, euismod ut tellus. Aliquam eu arcu quis risus auctor finibus. Pellentesque egestas scelerisque pulvinar. Pellentesque erat est, volutpat ac ultrices sit amet, laoreet ac purus. Sed eleifend elit magna, quis euismod neque porttitor in. Curabitur et felis posuere, vestibulum felis nec, accumsan neque. Aenean mattis libero quis lorem porttitor tincidunt. Phasellus porta libero nec sollicitudin posuere. Duis dapibus id eros fermentum iaculis. Sed in nunc viverra, venenatis eros sed, condimentum leo. Vestibulum ut dictum sem.</p>

    <p>Donec metus nibh, condimentum nec vehicula a, porttitor non nisl. Nulla convallis neque tempus neque hendrerit feugiat. Donec et ligula nec nibh sagittis pharetra ac eget magna. Nullam aliquet consequat facilisis. Phasellus convallis nisl vitae neque venenatis, ac tempus nibh tempus. Quisque vestibulum ante tellus, nec gravida leo lobortis id. Donec suscipit semper euismod.</p>

    <p>Nam porta velit eget tortor molestie aliquam. Pellentesque quis est id felis tempor facilisis. Cras et tristique lacus. Fusce sit amet hendrerit nisi. Aenean tincidunt quam sed neque vestibulum mollis. Integer a elit ac est faucibus bibendum id at mauris. Sed ultrices ullamcorper facilisis. Sed eu massa ut turpis finibus volutpat. Morbi finibus fermentum ipsum, nec hendrerit dui luctus in. Sed tincidunt pellentesque massa vel gravida. Aenean mattis justo eget nunc facilisis congue. Praesent a congue massa, sit amet luctus orci. Phasellus porttitor lacus at dignissim interdum. Maecenas porta lectus at augue iaculis, vitae tristique massa efficitur. Fusce ultrices commodo massa.</p>
</div>
!

↑ Insert the most common viewport meta tag

CSS

            
              //z-index
$zBase: 100;
$zPop: 400;
$zOverlay: 600;
$zOverContent: 800;

//mixins
@mixin bp($bp, $min-max: min-width) {
    $em: $bp/16;
    @media(#{$min-max}: #{$em}em) {
        @content;
    }
}

//color
$yellow: #FFDE16;

body {
    background: $yellow;
}

.wrap {
    padding: 1em;
    
    @include bp(700) {
        padding: 2em;
    }
}

.modal {
    display: block;
    padding: 0 1em;
    text-align: center;
    width: 100%;
    
    @include bp(700) {
        padding: 1em 2em;
        text-align: right; 
    }
    
     & > label {
        background: #000;
        border-radius: .2em;
        color: $yellow;
        cursor: pointer;
        display: inline-block;
        font-weight: bold;
        margin: 0.5em 1em; 
        padding: 0.75em 1.5em; 
        transition: all 0.55s ;
        &:hover { transform: scale(.97); } 
         
     }
    
    input {
        position: absolute;
        right: 60%; 
        top: 30px;
        z-index: -10;
        @include bp(700) {
            right: 50px;
        }
    }
    
    &__overlay {
        background: black;
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        text-align: center;
        top: 0;
        z-index: -800;
    }
    
    &__box {
        padding: 1em .75em;
        position: relative;
        margin: 1em auto; 
        max-width: 500px;
        width: 90%;
        
        @include bp(600, min-height) {
            left: 50%;
            position: absolute;
            top: 50%;
            transform: translate(-50%, -80%);
        }
        
        @include bp(800) {
            padding: 1.75em; 
        }
        
        label {
            background: $yellow;
            border-radius: 50%;
            color: black;
            cursor: pointer;
            display: inline-block;
            height: 1.5em;
            line-height: 1.5em;
            position: absolute;
            right: .5em;
            top: .5em;
            width: 1.5em;
        }
        
        h2 {
            color: $yellow;
            margin-bottom: 1em;
            text-transform: uppercase;
        }
        
        p {
            color: $yellow;
            text-align: left;
        }
    }
}


//hide modal till button is pressed 
.modal__overlay { 
    opacity: 0;
    overflow: hidden;
    transform: scale(.5);
    transition: all .75s cubic-bezier(0.68, -0.55, 0.265, 1.55);;
}
//open modal
input:checked ~ .modal__overlay { 
    opacity: 1;
    transform: scale(1);
    transition: all .70s cubic-bezier(0.68, -0.55, 0.265, 1.55);;
    z-index: 800;
}

input:focus + label {
    transform: scale(.97);
}
!
?   ?  
?   ?  
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // NO JAVASCRIPT REQUIRED
!
Must be a valid URL.
+ add another resource
via JS Hint
999px
Loading ..................