Resolving problems with Modal Pop-ups

Question

Resolving problems with Modal Pop-ups

I have a Modal that I am trying to open with the code below.

The modal opens fine and adds open to the parent class. However, when I click 'close', it does not close and does not add close to the class either.

Can anyone shed light on why this might be happening?

<script type="text/javascript">
jQuery(document).ready(function($) {

    $window = $(window)

    $(".modal-trigger").click(function(e) {
        e.preventDefault()

        var id = $(e.target).attr("href")

        $(id).addClass("open")

        $(id).find('.close').click(function(e) {
            e.preventDefault()
            $(e.target).parent().removeClass(".open")
        });

    })

});

</script>

Here is my Close button in HTML:

<button class="close icon-close"></button>

javascript jquery html css

Answer 1

Answer №1

It seems that using parent() may not direct you to the correct level. Instead, consider removing the .open class from the element where you initially added it, like so: $(id):

$(".modal-trigger").click(function(e) {
    e.preventDefault();

    var id = $(e.target).attr("href");
    $(id).addClass("open");

    $(id).find('.close').click(function(e) {
        e.preventDefault();
        $(id).removeClass("open");
        $(this).off();
    });
});

Furthermore, it is advisable to unbind the click event from the close button to prevent multiple bindings.

Answer 2

It seems that using parent() may not direct you to the correct level. Instead, consider removing the .open class from the element where you initially added it, like so: $(id):

$(".modal-trigger").click(function(e) {
    e.preventDefault();

    var id = $(e.target).attr("href");
    $(id).addClass("open");

    $(id).find('.close').click(function(e) {
        e.preventDefault();
        $(id).removeClass("open");
        $(this).off();
    });
});

Furthermore, it is advisable to unbind the click event from the close button to prevent multiple bindings.

Resolving problems with Modal Pop-ups

Answer №1

Similar questions

Transmit data or communications to a webpage while a script is performing operations (Django 4)

How to transform HTML input type with identical names into key-value pairs using jQuery

The scroll functionality does not seem to be functioning as intended on mobile devices when

Begin expanding new circles in jQuery from the exact location where the previous ones ended

The webmethod is not being triggered by Ajax

Is there a way for me to compare a string A1 with a value A2 located in index 0 within an array of values?

React Bootstrap problem

What is the best way to send a parameter in pug?

Having problems with CakePHP validation in the view?

Auto-closing dropdown menus in the navbar of a Shiny app with Bootstrap

Attempting to use the getCurrentUrl() function to retrieve the current URL and subsequently opening it in a new tab

The function initiates without delay upon meeting the specified condition

Refresh the dataTable once all external data has been successfully fetched

Is it possible to manipulate videos embedded in an iframe using javascript?

Displaying the Yii form directly on the page upon loading, rather than enclosed within a jQuery dialog box

I'm having trouble identifying the error in my Vue component that uses recursion. How can I pinpoint the

What could be causing the presence of white space between div elements in every browser except for Chrome?

Creating a reusable Angular directive that encapsulates a jQuery lightbox functionality

Navigating through nested JSON objects using JavaScript

The Node.js JSON string displays as "[object Object]" in the output