Jquery refuses to conceal a particular element

Question

Jquery refuses to conceal a particular element

I've encountered this issue before, but I'm facing a problem this time. I'm attempting to create a popup that is initially hidden. When clicked, the popup does appear, but I'm unable to close it. Additionally, when trying to change the styles using developer tools from display:none to display:block, it automatically switches back. Currently, the popup is located in the head section of the page, but I have also tried placing it at the very bottom.

Here is the HTML code for the popup:

<div class="tablecell midlineunit popup-hml middle">
    <div class="hml-popup-bg popupbg ">
        <div class="hml-popup-cnt">
            <div class="closepopup">X</div>
        </div>
    </div>
</div>

And here is the JavaScript associated with it:

$(".popup-hml").each(function(){
     $(this).click(function(){
         $(this).find(".hml-popup-bg").show();
     });
});
$(".closepopup").each(function(){
    $(this).click(function(){
        $(this).parent().parent().hide();
    });
});

Lastly, .hml-popup-bg has been styled as hidden in the CSS.

javascript jquery html css

Answer 1

Answer №1

Here's a more efficient way to achieve the desired functionality: Instead of using .each(), you can simply utilize .click() and employ .closest() in place of parent().parent();

$(".popup-hml").click(function(){
    $(this).find(".hml-popup-bg").show();
});

$(".closepopup").click(function(e){
    e.stopPropagation();
    $(this).closest('.hml-popup-bg').hide();
});

Answer 2

Here's a more efficient way to achieve the desired functionality: Instead of using .each(), you can simply utilize .click() and employ .closest() in place of parent().parent();

$(".popup-hml").click(function(){
    $(this).find(".hml-popup-bg").show();
});

$(".closepopup").click(function(e){
    e.stopPropagation();
    $(this).closest('.hml-popup-bg').hide();
});

Answer 3

Answer №2

It seems like this solution should do the trick. By closing it without stopping propagation, it allows for re-opening through bubbling.

$(".popup-hml").each(function(){
     $(this).click(function(){
         $(this).find(".hml-popup-bg").show();
     });
});
$(".closepopup").each(function(){
    $(this).click(function(e){
        e.stopPropagation();
        $(this).parent().parent().hide();
    });
});

Check out the code snippet here

Answer 4

It seems like this solution should do the trick. By closing it without stopping propagation, it allows for re-opening through bubbling.

$(".popup-hml").each(function(){
     $(this).click(function(){
         $(this).find(".hml-popup-bg").show();
     });
});
$(".closepopup").each(function(){
    $(this).click(function(e){
        e.stopPropagation();
        $(this).parent().parent().hide();
    });
});

Check out the code snippet here

Answer 5

Answer №3

It appears that your use of jQuery's .each() method is not in the correct place. Consider setting up 2 event listeners instead - one to open a popup when a button is clicked, and another to close it when the "X" is clicked.

You could achieve this functionality with the following jQuery code:

$(document).on("click", ".popup-btn", function(){
    $(".popup-overlay").show();
});
$(document).on("click", ".close-popup", function(){
    $('.popup-overlay').hide();
});

Answer 6

It appears that your use of jQuery's .each() method is not in the correct place. Consider setting up 2 event listeners instead - one to open a popup when a button is clicked, and another to close it when the "X" is clicked.

You could achieve this functionality with the following jQuery code:

$(document).on("click", ".popup-btn", function(){
    $(".popup-overlay").show();
});
$(document).on("click", ".close-popup", function(){
    $('.popup-overlay').hide();
});

Jquery refuses to conceal a particular element

Answer №1

Answer №2

Answer №3

Similar questions

Quickly view products in Opencart will automatically close after adding them to the cart and redirecting the

Can someone explain the inner workings of the Typescript property decorator?

The functionality of classes containing <ul> elements is ineffective

Sometimes, Express may return the message "not found" on and off

Tips for identifying when a tab has been reopened following closure?

Using PHP and jQuery to fetch data from two different tables simultaneously

Dynamic resizing navigation with JQUERY

I’m having trouble getting my home.html page to render in Spring Boot

Is it possible to show a pop-up window containing aggregated data when the jQuery double-click event

ajax receives an empty responseText after sending intermediate data to Python on the backend

Using CSS and Vue, you can customize the appearance of inactive thumbnails by displaying them

Is there a function for displaying the message "User is currently typing"?

Executing Cross-Origin Resource Sharing in Angular and Node

The content in the flex box item with horizontal scroll is overflowing beyond its boundaries

Enhancing safety by utilizing varying programming languages

New messages are revealed as the chat box scrolls down

Task: Choose MySQL option and Retrieve JSON data

display a new feature immediately upon the user's login

Issue observed in Angular Material: mat-input does not show background color when in focus mode

The issue of Angular curly braces malfunctioning in some simple code examples reversed my