CODEWITHSUNDEEP
phphtmlcss
MJ2410
MJ2410

Reputation: 518

Close CSS only lightbox by clicking background without using Js

I want to add a functionality for my lightbox, so that it closes also when clicking the background.

At present it closes on clicking the close button. But it should also close on clicking the background and not on clicking the inner contents of the lightbox.

I have a form inside my lightbox so making it close on clicking anywhere in the lightbox doesn't work for my requirement.

Is there any way I could do this using only CSS or PHP as this functionality is to be added in a wordpress website.

This is my lightbox example:

    <a href="#lightboxCustom">Click here</a> 

    <div id="lightboxCustom">
            <div class="lightboxCustomDiv">
            <a class="close" href="#_"><span style="color: #fff;">X</span></a>
            <center><h2>Title</h2><br></center>
            <p>Content </p>
            <form>
            <input type="text">
            <input type= "submit>
            </form>
        </div>
        </div>

CSS:

.lightboxCustom:target {
    outline: none;
    display: block;
}

.lightboxCustom{
    display: none;
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
}

Upvotes: 0

Views: 904

Answers (4)

04FS
04FS

Reputation: 5820

Use another such link, and place it behind your lightbox, covering the full screen, so that it “catches” all clicks outside the lightbox.

I moved the background color from your outer to your inner div element - so that the link can “sit between” the two, and cover everything that is not covered by the inner div.

You’ll probably want to add some more formatting to get the inner element nicely centered in the container etc., but the basic principle works. (The close link outside has a solid red background here, for demonstration purposes.)

.lightboxCustom:target {
  outline: none;
  display: block;
}

.lightboxCustom {
  display: none;
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.lightboxCustominner {
  background: rgba(0, 0, 0, 0.8);
}

.close-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: red;
  z-index: -1;
}
<a href="#lightboxCustom">Click here</a>

<div class="lightboxCustom" id="lightboxCustom">
  <a class="close-bg" href="#_"></a>
  <div class="lightboxCustominner">
    <a class="close" href="#_"><span style="color: #fff;">X</span></a>
    <center>
      <h2>Title</h2><br></center>
    <p>Content </p>
    <form>
      <input type="text">
      <input type="submit">
    </form>
  </div>
</div>

Upvotes: 1

Aakash Tushar
Aakash Tushar

Reputation: 504

Your code is working fine just needed some css styling.

.lightboxCustom:target {
    outline: none;
    display: block;
}

.lightboxCustom{
    display: none;
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    padding: 10px;
}
.lightboxCustominner {
  margin: auto;
  width: 500px;
  background: #fff;
  padding: 5px;
}
.close {
  color: #000;
  padding: 5px;
}
<a href="#lightboxCustom">Click here</a> 
<div class="lightboxCustom" id="lightboxCustom">
    <div class="lightboxCustominner">
        <a class="close" href="#_">X</a>
        <center><h2>Title</h2><br></center>
        <p>Content </p>
        <form>
            <input type="text">
            <input type= "submit>
        </form>
    </div>
</div>

Upvotes: 0

Piyush Teraiya
Piyush Teraiya

Reputation: 747

You can use this code

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Hello, world!</title>
    <style type="text/css">
        body, html {
            padding: 0;
            margin: 0;
            text-align: center;
        }
        a.lightbox img {
            height: 150px;
            border: 3px solid white;
            box-shadow: 0px 0px 8px rgba(0,0,0,.3);
            margin: 94px 20px 20px 20px;
        }
        .lightbox-target {
            position: fixed;
            top: -100%;
            width: 100%;
            background: rgba(0,0,0,.7);
            width: 100%;
            opacity: 0;
            -webkit-transition: opacity .5s ease-in-out;
            -moz-transition: opacity .5s ease-in-out;
            -o-transition: opacity .5s ease-in-out;
            transition: opacity .5s ease-in-out;
            overflow: hidden;
        }
        .lightbox-target img {
            margin: auto;
            position: absolute;
            top: 0;
            left:0;
            right:0;
            bottom: 0;
            max-height: 0%;
            max-width: 0%;
            border: 3px solid white;
            box-shadow: 0px 0px 8px rgba(0,0,0,.3);
            box-sizing: border-box;
            -webkit-transition: .5s ease-in-out;
            -moz-transition: .5s ease-in-out;
            -o-transition: .5s ease-in-out;
            transition: .5s ease-in-out;
        }
        a.lightbox-close {
            display: block;
            width:50px;
            height:50px;
            box-sizing: border-box;
            background: white;
            color: black;
            text-decoration: none;
            position: absolute;
            top: -80px;
            right: 0;
            -webkit-transition: .5s ease-in-out;
            -moz-transition: .5s ease-in-out;
            -o-transition: .5s ease-in-out;
            transition: .5s ease-in-out;
        }
        a.lightbox-close:before {
            content: "";
            display: block;
            height: 30px;
            width: 1px;
            background: black;
            position: absolute;
            left: 26px;
            top:10px;
            -webkit-transform:rotate(45deg);
            -moz-transform:rotate(45deg);
            -o-transform:rotate(45deg);
            transform:rotate(45deg);
        }
        a.lightbox-close:after {
            content: "";
            display: block;
            height: 30px;
            width: 1px;
            background: black;
            position: absolute;
            left: 26px;
            top:10px;
            -webkit-transform:rotate(-45deg);
            -moz-transform:rotate(-45deg);
            -o-transform:rotate(-45deg);
            transform:rotate(-45deg);
        }
        .lightbox-target:target {
            opacity: 1;
            top: 0;
            bottom: 0;
        }
        .lightbox-target:target img {
            max-height: 100%;
            max-width: 100%;
        }
        .lightbox-target:target a.lightbox-close {
            top: 0px;
        }
        .lightboxCustom {
            margin-top: 60px;
        }
    </style>
</head>
<body>
    <a class="lightbox" href="#goofy">
        Click here
    </a> 
    <div class="lightbox-target" id="goofy">
        <div class="lightboxCustom" id="lightboxCustom">
            <div class="lightboxCustominner">
                <center>
                    <h2>Title</h2>
                    <br>
                </center>
                <p>Content </p>
                <form>
                    <input type="text">
                    <input type="submit">
                </form>
            </div>
        </div>
        <a class="lightbox-close" href="#"></a>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $('.lightbox-target .lightboxCustom').click(function(){
            $('.lightbox-target').css({
                opacity: 0,
                zIndex: 1
            });   
        });

        $('a').click(function(){
            $('.lightbox-target#goofy').css({
                opacity: 1,
                zIndex: 3
            });
        });
    </script>
</body>
</html>

Upvotes: 0

mtk
mtk

Reputation: 77

I presume, you have a darkening background around your lightbox, right? If you want to make it CSS only, I would suggest making the background div a sibling.

<div class="lightboxCustom">
  <div class="lightboxCustominner">
  </div>
</div>
<div class="lightboxBackdrop">
</div>

.lightboxBackdrop {
  display: none;
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);

  //you need to play with z-index to make it look right
  z-index: 0;
}

.lightboxCustom {
  z-index: 1000;
}

.lightboxCustom:target {
  display: block;
}
.lightboxCustom:target + .lightboxBackdrop {
  display: block;
}

I've never done anything like this and have no idea, how it well it works for accessibility.

Upvotes: 0

Related Questions