Fancy Css3 Lightbox for AMP Web Pages

Having AMP versions of your article pages has huge benefits for any website or blog owner. But we all know it's not easy to create a super fancy web page without using Javascript. On AMP supported pages, even a good old modal box won't work. That's why we created this code snippet. Now you can have modal boxes, light boxes, or whatever-you-call-them boxes in your accelerated mobile pages!

Click For The Preview

Step One

In AMP pages, you can have only one style element, and the opening tag should be this: <style amp-custom>. If you have an amp web page, you most probably already have this style element so just copy the code below and paste it inside your style element:

.dugme {
    cursor: pointer;
    display: inline-block;
    padding: 8px 12px;
    background: #F4511E;
 font-family:Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #fff;
    -webkit-border-radius: 3px;
    border-radius: 3px
}
[name="kapat"] {
    position: absolute;
    bottom: 20px;
    right: 20px
}
.koddostu-ampshadow {
display:none;
opacity:0
}
.Pencereac {
    width: 1px;
    height: 1px;
    visibility: hidden
}
.Pencereac:checked + .koddostu-ampshadow {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3);
    transition: opacity 0.6s ease;
    top: 0;
    left: 0;
    z-index: 9;
    opacity: 1
}
.koddostu-ampwindow{
position:relative;
 background:#fff;
 width:500px;
 min-height:120px;
 max-width:86%;
 max-height:86%;
 margin:15px auto;
    box-shadow: 0 0 6px 2px rgba(0,0,0,.4);
 -webkit-box-shadow: 0 0 6px 2px rgba(0,0,0,.4);
    -webkit-border-radius: 3px;
    border-radius: 3px
}
.koddostu-p16{padding:16px}

.koddostu-ampwindow .dugme{
position:absolute;
bottom:16px;
right:16px;
}

Step Two (last step)

Now all you need to do is to copy the code below, past it to anywhere you like in your amp website.

You can also edit the "You can put your text(or content) here" line to, well.. put your own text or content.

<!--Author: Mete Erturk-->
<!--Licence: GNU GPL V2.0-->
<!--http://en.koddostu.com/2017/03/fancy-css3-lightbox-for-amp-web-pages.html-->
<!--Name: Css Lightbox for AMP Web Pages-->

<div id="pencerekodu">
<label for="koddostu-ampshadow" class="dugme">Open</label>
<input type="checkbox" class="Pencereac" id="koddostu-ampshadow" name="koddostu-ampshadow"></input>
<label class="koddostu-ampshadow">
<div class="koddostu-ampwindow">
<div class="koddostu-p16">
You can put your text(or content) here.
<label for="koddostu-ampshadow" class="dugme">Close</label>
</div>
</div>
</label>
</div>

<!--Author: Mete Erturk-->
<!--Css Lightbox for AMP Web Pages STOP-->

Add This Code Snippet To Your Blogger Blog