Close button for body

I have created a form that floats in the center of the screen

On this form, I have included a button designed to close it

However, I would like for the form to be closed anywhere on the screen when clicked with the mouse

Here is my code:

$(".offer-close").click(function () {
        $(".div-fix").fadeOut(500);
    });

<div class="div-fix">
<div class="offer-shop">

    <div class="cur-package">
        <div class="offer-close"><i class="fa fa-times"></i></div>
        <h6>Service</h6>

        <div class="pack-b">

            <div class="pack-price">6500 <div>
            <br>

            <div class="pack-shop"><a href="#" target="blank">Buy</a></div>
        </div>
        <div class="pack-c">any ...</div>
    </div>
</div>
</div>

For example, check out this feedback form website:

javascriptjquerycssfacebox

Answer №1

To resolve the issue, simply include the script provided below:

$(document).mouseup(function (e)
{
    var element = $(".fix-div");

    if (!element.is(e.target) // check if the click target is not the element...
        && element.has(e.target).length === 0) //... or any of its descendants
    {
        element.hide();
    }
});

View jsFiddle Example

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

Browse through different states by clicking on the <a> </a> tag

Is there a way to switch between states defined by $stateProvider when clicking on the <a> </a> tag? Below are the states I have set up: $stateProvider //region page States .state('page1', { url: "/pg1", ...

javascriptangularjsangularjs-scopeangular-ui-router

How can I evenly distribute three list items on a PhoneGap webpage using CSS?

My goal is to create a PhoneGap app with a main menu featuring a title and three buttons. Here is the layout: <body> <div class="app"> <div class="headerOne"> <h1></h1> </d ...

htmlcsscordova

Navigating Form Submission in Next.js

In this code snippet, I attempted to perform simple addition (ket=name + names). The desired outcome is a numerical sum displayed as “ket”. However, when entering 3 and 6 into the input fields, the result appears as 36 instead of 9. export default fu ...

javascriptformsnext.js

Which function is most suitable for verifying if the values from req.param are NaN and assigning a new value if they are found to be NaN?

Regarding the about page: I'm currently working on a react app that sends URL parameters to the backend server. The frontend URL looks something like this: maxprice=100000&minsqm=50&maxsqm=100&page=1, which are the user's filters for ...

javascriptnode.js

substituting the deep watcher in Angular

In my application, I am working with a data object called fulldata, which consists of an array of objects. fulldata = [ {'key': 'abc', values: {.....},....}, {'key': 'efg', values: ...

javascriptangularjs

Image conceals secretive PHP script

I currently have a webpage featuring various images, each of which has a button allowing users to favorite the image. Upon clicking this button, a PHP script is triggered in order to add the image to their list of favorites. My objective is to initiate th ...

phpjqueryhtmlajax

Having trouble updating the value of my textfield in material-ui using formik

Below is the code I'm working with to set a default value using the material-ui Textfield API within a formik fieldarray: <TextField name={`myGroups.${index}.myGroupName`} value={`Group ${index+1}`} label="Group" InputProps={{ ...

javascriptreactjsmaterial-uiformik

Guide to generating a new element and displaying updated data whenever it is retrieved in a React application

I'm completely new to React and I'm struggling with rendering and listing data fetched from Firebase on my HTML page. I attempted the following approach: const Music = ({ match }) => { const [titles, setTitles] = useState([]); // Change ...

javascriptreactjsfirebasefirebase-realtime-databaserxjs

Dynamically change the fill color of an SVG using styled-components

I've been attempting to target the fill property of my SVG using CSS in styled-components without any luck. Here is my SVG: <svg width="65" height="19" viewBox="0 0 65 19" fill="none" xmlns="http://www. ...

javascriptcssreactjssvgstyled-components

Issue with scrolling in Droppable container on JQuery UI interface

I've encountered an issue with JQuery UI. In my code snippet, I can drag elements onto fields and when hovering over a field, it gets highlighted in green. However, I recently added the functionality to scroll while dragging. Now, I can scroll up and ...

javascriptjqueryjquery-ui

Tips for assigning the result of a Fetch API call to a variable

Hello everyone! I'm currently working on a project that requires me to retrieve the latitude or longitude of a location using the Google Maps API. However, I am facing an issue with returning values using the Fetch API and its promises. I have succe ...

javascriptecmascript-6es6-promisefetch-api

What causes the Invariant Violation: Invariant Violation: Maximum update depth exceeded error to occur when using setState()?

Looking for some help with this component: // here are the necessary imports export default class TabViewExample extends Component { state = { index: 0, routes: [ { key: 'first', title: 'Drop-Off', selected: true }, ...

javascriptreactjsecmascript-6

What is the best way to use element.appendChild to generate a link?

I am currently utilizing the following snippet of Javascript to extract information from the current webpage using a browser extension. I have only included a portion of the code that is relevant, as the full script is quite lengthy. The code works perfect ...

javascripthyperlinkhrefappendchild

Exploring the integration of Glide js within a Next js environment

I am trying to figure out how to use a script tag in the next JavaScript _app.js component for utilizing the Glide JavaScript carousel. However, I am facing difficulties in using the script tag. Can someone help me out by providing guidance on how to inc ...

javascriptreactjsnext.js

An easy way to activate the save button automatically

Is there a way to automatically enable the save button when a user checks the checkbox and enters text in the input field? I'm not sure what steps are needed or if there is an alternative approach to achieve this. jQuery("input[type='text&apos ...

javascriptjquery

Tips for customizing the background color and image of a toaster

Looking to modify the background color and image based on the else condition (toaster.error) success: function (data) { if (data.message != ""){ toastr.success(data.message); ...

javascripthtmlcssstylesangular-toastr

Incorporate a map (using leafletjs or Google Maps) as a subtle backdrop

I am currently working on a one-page website and I would like to include a map as a background behind the "contact" section. The map can be set to float, draggable, or positioned at the back. I have experience using both the Google Maps API and LeafletJS, ...

javascripthtmlcssgoogle-mapsleaflet

Retrieve data from FileReader's onload event asynchronously in Javascript

Although this question has been asked numerous times before, I have reviewed the answers provided and still cannot get my code to work. I am working with Angular 2. I have input tags for file insertion. The file successfully reaches the component, but when ...

javascriptangularfilereader

GraphQL failing to communicate with WP API

Any help is appreciated! I am currently retrieving data from a WP Rest API. When I run the WordPress site locally on my machine using http://localhost:8000 and access the graphql playground at http://localhost:3000/api/graphql, everything works fine as ex ...

javascriptwordpressgraphqlnext.jswp-api

Cannot execute the function test()

I'm just diving into the world of JavaScript and have put together a little fiddle with my code. Check it out here. However, I've run into an issue where removing CDATA makes it work fine in fiddle but causes problems in XHTML editors like Eclip ...

javascript