Utilizing e.target to define hitbox within this context

I implemented a popup window on my website, and I utilized jQuery to make it fade in and out when specific areas are clicked. A notable feature is that if the user clicks on the background instead of the box itself, the application will close.

$("#fixedHoverBg").click(function(e){
    if(e.target == this)
    {
        $("#fixedHoverBg").fadeOut("slow");
    }
});

This functionality works as expected when clicking above or below the popup box's area, but not on its left or right side. It is peculiar because there is no surrounding container for the box, so there should be no other element interfering with the background click event.

Below is the structure of divs in my HTML:

<div id='fixedHoverBg'>
<center>
    <div id='selectorWindow'>
        <!-- Content goes here -->
    </div>
</center>

CSS:

#fixedHoverBg {
    position: fixed;
    background - color: rgba(255, 255, 255, 0.85);
    z - index: 200000;
    width: 100 % ;
    height: 100 % ;
    top: 0;
    left: 0;
    display: none;
}

#selectorWindow {
    width: 730px;
    height: 600px;
    background: radial - gradient(ellipseatcenter, rgba(87, 179, 237, 1) 0 100 % ;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#57b3ed', endColorstr = '#328ee0', GradientType = 1);
    margin - top: 90px;
    border: 5px solid#ffae43;
    box - shadow: 0 0 0 6px white,
    0 0 20px 5px rgba(0, 0, 0, 0.4);
    border - radius: 5px;
    position: relative;
    display: block;
}​

I am unable to identify what is causing this unexpected behavior of the click event!

jqueryhtmlcss

Answer №1

Avoid using the outdated <center> tag as it can create an unwanted block element around the content of a popup. This invisible block can cause unintended actions when clicking to the left or right of the content.

To resolve this issue, consider utilizing CSS instead:

#selectorWindow {
    margin-left: auto;
    margin-right: auto;
    /* ... */
}

See a live demonstration here: http://jsfiddle.net/AbCdE/

Answer №2

The issue you're facing is that the <center> element is expanding to fill the entire width of the viewport (you can verify this using Firebug or Developer Tools). To address this, adjust your click event selector to include this element as well:

$("#fixedHoverBg, #fixedHoverBg > center").click(function(e){
    if(e.target == this)
    {
        $("#fixedHoverBg").fadeOut("slow");
    }
});

See a live demo here: http://jsfiddle.net/393CR/1/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with radio button validation in JS?

I'm having difficulty understanding why the radio button is not staying checked when I select another option. To demonstrate, I created a fiddle where initially the "diy" button is selected but switching to "paid" causes the radio button to jump back ...

javascriptjquery

Having trouble submitting a date input form generated with vuejs on Safari browser

I am a huge fan of Vuejs and it's my go-to at work. The other day, I came across a rather perplexing scenario. If you have any insights into this, please do share. Here is the code in question: <script setup lang="ts"> import { ref ...

javascripthtmlvue.jssafari

Empty JSON response returned from PHP using Ajax is currently null

I am facing an issue where the geolocation JavaScript array that I pass to a PHP script via ajax is always NULL. I have tried multiple approaches but cannot seem to figure out the root cause of this problem. Here is a snippet of my JavaScript/jQuery code: ...

phpjqueryajaxjsonnull

What could be the reason for my ul hover effect not functioning as expected?

I'm struggling to create a menu where hovering over categories reveals another menu below it. I have created both the main menu and sub-menu, but I am unsure how to make the sub-menu appear on hover or apply any styling to it. I've tried various ...

htmlcssdrop-down-menumenuhover

Explore the Wikipedia API to retrieve a random page along with its associated links

Is there a way to generate a random page using the code generator=random? Unfortunately, it doesn't seem to work with my current code snippet: http://en.wikipedia.org/w/api.php?action=parse&format=json&prop=text&page=Little_Richard&ca ...

jqueryajaxwikipedia-api

Default cursor for Internet Explorer: automatic

I have a container div that holds all of my website's content. I want this container to change the cursor to a pointer when clicked on, but I don't want the elements inside the container to inherit this cursor style: https://i.sstatic.net/8joJo. ...

javascripthtmlcssinternet-explorercursor

Steps for implementing an EsLint Constraint specifically for next/link

How can I set up a linting rule to display an error if the next/link component is used for routing? I want to restrict routing to only be allowed through the default method. To resolve this issue, I included the statement "@next/next/no-html-link-for-pag ...

htmlnext.jseslinteslintrc

Prevent a HTML button from being clicked multiple times before it disappears (using Django)

I am currently working on a Django project that involves events where users can join by adding their user_id and event_id to the attend model. On the event page, there is a join button form that, when clicked, adds the user to the attendees list. After cli ...

javascripthtmlcssdjango

Discovering all instances of a particular name in JSON using incremented values: a guide

I am looking to automatically detect every occurrence of a specific name in my JSON data. { "servergenre": "Classic Rock", "servergenre2": "pop", "servergenre3": "rock", "servergenre4": "jazz", "servergenre5": "80s", "serverurl": "http://www.n ...

javascriptjqueryjsonloops

Trouble displaying images from JSON file in AngularJS using ng-src - need help with image loading

While utilizing AngularJS to extract image data from a JSON file, everything seems to work fine for other types of data except images. Why is the ng-src not retrieving any images? I am attempting to load all the images into the div and set the src, alt, a ...

htmlangularjsjson

Automate populating multiple selection fields from an array in PHP

An input field can be automatically populated from an array containing a list of times. For example: $fruits = ['apple', 'mango', 'orange']; $input = '<select name="fruits" multiple="multiple">'; foreach ($fr ...

phphtml

I'm struggling to convert this vertical navigation bar into a horizontal layout using CSS

<nav class="navbar navbar-dark bg-dark sticky-top"> <a class="navbar-brand" href="#">I/H</a> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> ...

htmlcsstwitter-bootstrapbootstrap-4

Preventing postback is not guaranteed by returning false from the client-side handler

Within my WebForms page, there is a button coded as follows: <asp:Button ID="btnNewProgramNext" runat="server" Text="Next &gt;&gt;" /> A javascript/jquery script has been implemented to manage its event. $('#<%= btnNewProgramNext.C ...

javascriptjqueryasp.netwebforms

Instructions for passing the chosen value to Django

I am struggling to set up a search button using Ajax and Django. I need to send the selected value to the server, but I can't seem to retrieve the value from the select HTML tag. The variable value always ends up empty ({"obj":""}). Any ideas? HTML : ...

javascriptjquerydjangoajaxdjango-3.0

Resolve memory leak issue with jQuery when returning an MVC partial view

I am developing an MVC application to display a table view. One of the columns in the table includes an action link that opens a jQuery UI dialog. After saving data from the dialog, I call the GridRefresh controller method which retrieves the newly saved d ...

jqueryajaxasp.net-mvcjquery-ui-dialog

There seems to be a problem with the full calendar updateEvent feature as it is unable to read the property 'clone'

Struggling to update an event using FullCalendar and a modal. Encounter the 'cannot read property 'clone' of undefined' error when attempting to update. Following the documentation, I utilize the clientEvents method. It is crucial t ...

javascriptjqueryfullcalendar

Tips on embedding an HTML page within another HTML page by utilizing a custom directive in AngularJS

I am looking to utilize custom directives in order to insert one HTML page into another. How can I achieve this? The custom directive code is as follows: (here is the .js file) fbModule.directive('fbLogin', function(){ return { ...

javascripthtmlangularjs

Automatically setting the navbar to expand on medium devices

I am facing an issue while styling my navbar with BS5 installed. I have noticed that the className navbar-expand-md is being assigned, even though I have specified navbar-expand-custom in my code. navbar = _dbc.Navbar( [ _dbc.C ...

pythoncssbootstrap-5plotly-dash

JavaScript for Color Swapping on Click Event

While working on coding a website, I attempted to change colors and pictures onclick using JavaScript to edit the CSS. However, the code is only partially functional. Only the "txtArea" field changes color. After checking validators and consoles, everyth ...

javascripthtmlcssvalidationdebugging

Display a text decoration effect when hovering over a division

Is there a way to change the color of a link when hovering over the entire div it's in, rather than just the link itself? Can this effect be achieved using only HTML & CSS? For instance, if I had (jsfidde), how could I make the link turn blue when ho ...

htmlcss