Responsive Pure CSS Modal/Lightbox without Javascript

You have seen many solutions to make a model or a lightbox with Javascript but what about making a lightbox with CSS only and make it responsive?

Yep! Its a mobile friendly and allow you to add content, images or Youtube video in Lightbox without additional customization or coding.

I will create a CSS lightbox which works with a button. We’re going to use the :target selector for creating the popup/model box.

The popup will work when a user click on a button and we are going to use label element for creating this button. With the help of :checked element, We will able to make it clickable.

Similar, We will create a close button by the help of label element and we will do the same to use the :checked element to target it.

Few Things to Consider While Adding CSS Lightbox

There are a few considerations to debate before we start off. While taking away Javascript is excellent, it isn’t always necessary as efficient, as it could do things such as insert in content, eliminate markup, etc.

This demonstration is not heading to be the ultimate way to handle all situations that want a lightbox. That said, it’s attractive stinking awesome that can now be achieved using pretty basic CSS techniques, not think?

It has been tested in every modern variant of Chrome-, Safari, Opera, and Firefox. I couldn’t care less about IE about demos, but if there are bugs in IE even, I understand it’s with the capacity of most everything being utilized here.

HTML Markup

The markup is simple and easy to understand. We have a button, in fact, it’s a label which will be handled using checkbox.

We can say our button will define as checkbox but it will be hidden, and the label HTML element will take the place of it.

We have wrapped the checkbox inside the lightbox class, and you can also see another label which will use for transparent background color.

<label class="hero button" for="lightbox-1">Launch Lightbox</label>

<aside class="lightbox">
  <input type="checkbox" class="state" id="lightbox-1" />
  ..........
  <label class="backdrop" for="lightbox-1"></label>
</aside>

Adding Heading & Close Button

For content, heading and close button, we have a wrapper class content which is defined within the article HTML5 element.

The close button also represents using the label. Both heading and a close button set inside the header HTML5 element.

<article class="content">
    <header class="header">
      <h3 class="h h3">Lorem Ipsum</h3>
      <label class="button" for="lightbox-1">&times;</label>
    </header>
    ............
</article>

Adding Content in Lightbox

We try to keep each section separately so that it can be easily understood. As for as content, we have defined the main HTLM5 element with class main, and here you can place your lightbox content.

<main class="main">
   <p>Lightbox Content Goes Here.</p>
</main>

The Styles

First of all, we will do the styling for the button. We have done some basic style, and you can do as you want to look like your button.

We have added some background color and transition.

.button {
	cursor:pointer;
  display: inline-block;
  margin: 0;
  padding: 10px 15px;
  background-color: #f39c12;
  border: none;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  -webkit-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
}

For lightbox, we have used the position fixed to align the box center of the body. That’s the reason we set the all of the value of position set to zero.

.lightbox {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 0;
  padding: 0 20px;
}

For lightbox, we set the position relative and then added width and height. We also added transform so that it will come in a nice way.

.lightbox .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 2;
  max-width: 500px;
  max-height: 95vh;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  -webkit-transform: translateY(-200%);
          transform: translateY(-200%);
  -webkit-transition: 0.3s -webkit-transform ease-in-out;
  transition: 0.3s -webkit-transform ease-in-out;
  transition: 0.3s transform ease-in-out;
  transition: 0.3s transform ease-in-out, 0.3s -webkit-transform ease-in-out;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

There are few more things we have done, but for background transparent color, we have set position fixed with RGBA background color.

.lightbox .backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 100%;
  left: 0;
  opacity: 0;
  background: rgba(0, 0, 0, 0.3);
  -webkit-transition: 0.3s opacity ease-in-out, bottom 0.1s 0.3s;
  transition: 0.3s opacity ease-in-out, bottom 0.1s 0.3s;
}

Did you like it? If don’t mind to share that would be great. If you having any issue, You can leave a comment & can leave a comment to help other readers.

You May Also Like

Leave a Comment