Ending the Overlay

Question

Ending the Overlay

I am using an overlay:

<div id="overlayer" class="overlayer">
<div id="board" class="board"></div>
</div>

Here are the CSS properties I have applied to it:

#overlayer
{
position:fixed;
display:none;
top:0;
left:0;
width:100%;
height:100%;
background: -moz-linear-gradient(
        top,
        #807980 0%,
        #3d323d);
background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#807980),
        to(#3d323d));
        opacity:0.6;
        z-index:9998;
}

#board
{
position:relative;
left:33%;
top:20%;
width:600px;
height:450px;
border-radius:15px;
background-color:white;
z-index:9999;
display:none;
}

To trigger the overlay, this script is used:

<script type="text/javascript>
$(document).ready(function(){
function overlayerOn(){
    $('#overlayer').fadeIn(800);
}

function overlayerOff(){
    $('#overlayer').fadeOut(800);
};

$('#fr').click(function(e){
    overlayerOn();
    var $br = $('#board');
    $br.css('display', 'block');
    });

$('#overlayer').click(function(e){
    overlayerOff();});

});
</script>

However, there is a problem with the closing functionality as it closes when clicking on the div inside the overlay. Any suggestions on how to fix this? Thank you...

javascript jquery css overlay opacity

Answer 1

Answer №1

To prevent the event from bubbling up:

$('#board').on('click', function(e){e.stopPropagation();});

Additional resources:

Answer 2

To prevent the event from bubbling up:

$('#board').on('click', function(e){e.stopPropagation();});

Additional resources:

Answer 3

Answer №2

This phenomenon is referred to as event propagation, and it can be halted by blocking the click event from moving upwards in the DOM hierarchy using e.stopPropagation(); when interacting with the board element like so:

$('#board').click(function(e){
    e.stopPropagation();
});

Answer 4

This phenomenon is referred to as event propagation, and it can be halted by blocking the click event from moving upwards in the DOM hierarchy using e.stopPropagation(); when interacting with the board element like so:

$('#board').click(function(e){
    e.stopPropagation();
});

Answer 5

Answer №3

If you want to prevent the click event from bubbling up, you can consider inserting this code snippet:


$("#board").click(function(e) {
    e.stopPropagation();
    return false;
});

Is this what you were looking for?

Answer 6

If you want to prevent the click event from bubbling up, you can consider inserting this code snippet:


$("#board").click(function(e) {
    e.stopPropagation();
    return false;
});

Is this what you were looking for?

Answer 7

Answer №4

Hey there, a great tip is to make use of the e.target property To improve your close function, try replacing it with the following:

$('#overlayer').click(function(e){
    if (e.target === $('#overlayer')[0]) {
     overlayerOff();
    }
});

Understanding event bubbling is key here, check out this informative resource for a quick grasp on the concept: http://www.quirksmode.org/js/events_order.html

Answer 8

Hey there, a great tip is to make use of the e.target property To improve your close function, try replacing it with the following:

$('#overlayer').click(function(e){
    if (e.target === $('#overlayer')[0]) {
     overlayerOff();
    }
});

Understanding event bubbling is key here, check out this informative resource for a quick grasp on the concept: http://www.quirksmode.org/js/events_order.html

Answer 9

Answer №5

Check out this helpful tutorial for preventing event propagation in nested divs.

$("#container").click(function(e){
   e.stopPropagation(); //This method works on most browsers
});

Answer 10

Check out this helpful tutorial for preventing event propagation in nested divs.

$("#container").click(function(e){
   e.stopPropagation(); //This method works on most browsers
});

Ending the Overlay

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What could be causing the array to display incorrect results in React?

Tips on setting the default sorting order in AngularJS

Dealing with undefined properties in Javascript can cause errors

Javascript is coming back with a message of "Access-Control-Allow-Origin" not being allowed

The value retrieved from redux appears to be varying within the component body compared to its representation in the return

The Uib-Dropdown functionality is not functioning properly when placed within the body of an HTML view

Troubleshooting: jQuery ajax form is not functioning as expected

What is the best method to redirect users who are not logged in from every URL when using PassportJs?

After ReactDOM is used, the JavaScript code is no longer functioning properly

What steps can I take to resolve a Bootstrap form validation issue where the email field is causing the label to shift down?

What is the best way to access and display the innerText of elements that have been removed using console

The issue of AJAX .done() method returning undefined when using $.each() on JSON response

What is AngularJs's preference: URL or ID for templateUrl?

I am having trouble styling a pre-existing class in bootstrap using my custom CSS file

An issue with the animation script in Ionic

Moving from the landing page to a specific tab in Ionic 2+ using dynamic navigation

Instructions for saving a binary file on the client using jQuery's .post function

Extracting JSON Data into Text Boxes within jQuery UI Dialogs

Change a TypeScript alias within the @types namespace

Executing JavaScript function on AJAX update in Yii CGridView/CListView