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 pure CSS 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 this pure CSS lightbox? If yes, then share it with your friends. If you having any issue or suggestion, you can leave a comment.

You Might Be Interested In:

Ashfaq Ahmed is a freelance WordPress developer and owner of codeconvey.com. I developed modern and highly interactive websites. I always focus on improving my development and design skills.

2 thoughts on “Responsive Pure CSS Modal/Lightbox without Javascript”

  1. Hello
    This is utterly brilliant – I found nothing like it anywhere else, and the only reason I looked was because I’m using it on a site about the history of railways in South Australia, with a central map and a drop-down menu above. This menu links to articles in newspapers and books of the earlier period, loaded into iframes which drop down over the central map to exactly cover it. It works!! But there is a great deal of extra code inserted into the ‘aside’s, plus I have given each iframe its own css file to make sure the right iframe appears below its menu link.

  2. to continue…..Having never even come across asides, is there some way of putting them all into a separate file? There will be 15-20 of them eventually.
    Doesn’t matter if that’s not possible.
    Thankyou for your brilliant bit of software.

Comments are closed.