Close button for body

Question

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:

javascript jquery css facebox

Answer 1

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

Answer 2

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

Close button for body

Answer №1

Similar questions

Use a for loop to fill an array with values and then showcase its contents

Tips for including headers with @Url.Action() to enable jwt authorization

Converting JSON data to an Excel file in an Angular application

How can I add an object to an array of objects in Vue.js?

Optimize the size of div elements using jQuery

The Media Query Menu is not aligned in the center for smaller screens, functioning in both medium and extra-small sizes

Is it time to use JQuery post-DocumentReady?

Organizing a JSON array and displaying it using the $.each function

jQuery - handling dynamically added elements on page load

jQuery for Special Characters

Converting Phone Numbers, Fax Numbers, and Zip Codes for Input into a Database

Retrieving URL from AJAX Request in Express JS

Uploading files seamlessly without the need for refreshing the page

next-redux-wrapper is being invoked repeatedly and experiencing multiple calls to HYDRATE

Tips for personalizing PNG images within an SVG element

Should I generate an array or pull data directly from the database?

Center the navigation links within the navigation block

Switch between Fixed and Relative positions as you scroll

"What is the best way to use jQuery to create a toggle effect where one button controls the state

Instructions on how to determine if a client is a "desktop terminal"