javascript - Close lightbox on click outside of the child div - Stack Overflow

admin管理员组

文章数量:1277280

I'm creating a lightbox without using a jquery plugin, and now I'm trying to close it by clicking on the close button or by clicking anywhere else outside of the white area (.white_content)
Jsfiddle Example

<button onclick="document.getElementById('lightbox').style.display='inline';">
    Show lightbox
</button>

<!-- LIGHTBOX CODE BEGIN -->
<div id="lightbox" class="lightbox" style="display:none">
    <div class="white_content">
        <a href="javascript:void(0)" onclick="document.getElementById('lightbox').style.display='none';" class="textright">Close</a>
            <p>Click anywhere to close the lightbox.</p>
            <p>Use Javascript to insert anything here.</p>
    </div>
</div>
<!-- LIGHTBOX CODE END -->

Although it's not just like I want it. I want it to close only if I click on the dark area of the lightbox and not on the white container (.white_content), I've heard that event.propagation can be a bad thing to use, so here's how I'm closing the lightbox

$(document).on('click', function(event) {
  if (!$(event.target).closest('button').length) {
    $(".lightbox").hide();
  }
});

I'm creating a lightbox without using a jquery plugin, and now I'm trying to close it by clicking on the close button or by clicking anywhere else outside of the white area (.white_content)
Jsfiddle Example

<button onclick="document.getElementById('lightbox').style.display='inline';">
    Show lightbox
</button>

<!-- LIGHTBOX CODE BEGIN -->
<div id="lightbox" class="lightbox" style="display:none">
    <div class="white_content">
        <a href="javascript:void(0)" onclick="document.getElementById('lightbox').style.display='none';" class="textright">Close</a>
            <p>Click anywhere to close the lightbox.</p>
            <p>Use Javascript to insert anything here.</p>
    </div>
</div>
<!-- LIGHTBOX CODE END -->

Although it's not just like I want it. I want it to close only if I click on the dark area of the lightbox and not on the white container (.white_content), I've heard that event.propagation can be a bad thing to use, so here's how I'm closing the lightbox

$(document).on('click', function(event) {
  if (!$(event.target).closest('button').length) {
    $(".lightbox").hide();
  }
});

• javascript
• jquery
• html

Share Improve this question Follow asked Apr 3, 2015 at 22:27 user4187763user4187763

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

you can change you condition bit like below

$(document).on('click', function(event) {
    if ($(event.target).has('.white_content').length) {
        $(".lightbox").hide();
    }
});

Most lightbox scripts are using two div-s, content and overlay. Overlay is there for background and to prevent users to click on page content, and also click on overlay can be used to close lightbox.

HTML:

<div id="lightbox"> LIGHTBOX CONTENT </div>
<div id="overlay"></div>

JS:

$( '#overlay, #close').on('click', function(event) {
    $("#lightbox, #overlay").hide();
});

$( '#show').on('click', function(event) {
    $("#lightbox, #overlay").show();
});

EXAMPLE

You want to close the lightbox on any click that isn't targeting the lightbox or one of its children. Your existing code is pretty close:

$(document).on('click', function(event) { 
    if (!$(event.target).closest('button').length &&
        !$(event.target).closest('.white_content').length) {
        $(".lightbox").hide();
    }
});

$(document).on('click', function(event) { 
    if (!$(event.target).closest('button').length &&
        !$(event.target).closest('.white_content').length) {
	    $(".lightbox").hide();
    }
});

.textright {
    float: right;
}
.lightbox {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0, 0, 0, .8);
}

.white_content {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 5px solid gray;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="document.getElementById('lightbox').style.display='inline';">
    Show lightbox
</button>

<!-- LIGHTBOX CODE BEGIN -->
<div id="lightbox" class="lightbox" style="display:none">
    <div class="white_content">
        <a href="javascript:void(0)" onclick="document.getElementById('lightbox').style.display='none';" class="textright">Close</a>
            <p>Click anywhere to close the lightbox.</p>
            <p>Use Javascript to insert anything here.</p>
    </div>
</div>
<!-- LIGHTBOX CODE END -->

I'd also remend using a class to denote whether the lightbox is visible or not, rather than changing the display property directly; that way it's more clear when you check it. Compare $el.is('.active') with $(el).css('display') == 'inline'

本文标签： javascriptClose lightbox on click outside of the child divStack Overflow