The problem of creating a custom pop-up with jQuery

Question

The problem of creating a custom pop-up with jQuery

I'm running into an issue while trying to develop a custom CSS and jQuery popup. Despite my efforts, the popup isn't functioning as intended. Take a look at my code below and point out where I may have gone wrong. What I aim to achieve is a popup that opens when the user clicks on the "Click Me" button, and closes when the user clicks outside of the popup.

jQuery has already been included in my code. Here's the code snippet:

<style>
    .maskarea {
    width: 100%;
    height:700px;
    background: rgba(255, 255, 255, .7);
    position: fixed;
    left: 0;
    top: 0;
    display:none;
}
.popup {
    width: 300px;
    height: 300px;
    position: fixed;
    left: 50%;
    background: #ccc;
    margin-left: -150px;
    top: 50%;
    margin-top: -150px;
}
</style>
<script>
$(function(){
     $(".hit").click(function(){
        $(".maskarea").show();
     })
})
</script>
</head>
<body>
<a href="javascript:void(0)" class="hit">Click Me</a>
    <div class="maskarea">
        <div class="popup">
        </div>
    </div>
</body>

jquery html css

Answer 1

Answer №1

1st Step: To hide the .maskarea when the user clicks on it, create a click event.

2nd Step: Create another click event for the .popup div to prevent the .maskarea click.

Give this a try:

$(function(){
     $(".hit").click(function(){
        $(".maskarea").show();
     });
     // Hide the .maskarea when the user clicks on it
     $('.maskarea').on('click', function(){
       $(this).hide();
     });
     // Use e.stopPropagation(); for .popup div to prevent .maskarea click
     $('.popup').on('click', function(e){
       e.stopPropagation();
     });
})

See working Demo

Learn more about e.stopPropagation()

Answer 2

1st Step: To hide the .maskarea when the user clicks on it, create a click event.

2nd Step: Create another click event for the .popup div to prevent the .maskarea click.

Give this a try:

$(function(){
     $(".hit").click(function(){
        $(".maskarea").show();
     });
     // Hide the .maskarea when the user clicks on it
     $('.maskarea').on('click', function(){
       $(this).hide();
     });
     // Use e.stopPropagation(); for .popup div to prevent .maskarea click
     $('.popup').on('click', function(e){
       e.stopPropagation();
     });
})

See working Demo

Learn more about e.stopPropagation()

Answer 3

Answer №2

You were so close to getting it right, all you needed was the close handler. Take a look at this example pen.

Here is the HTML code to use:

<a href="javascript:void(0)" class="hit">Click Me</a>
<div class="maskarea">
  <div class="popup">
  </div>
</div>

And this CSS:

.maskarea {
  width: 100%;
  height: 700px;
  background: rgba(255, 255, 255, .7);
  position: fixed;
  left: 0;
  top: 0;
  display: none;
}

.popup {
  width: 300px;
  height: 300px;
  position: fixed;
  left: 50%;
  background: #ccc;
  margin-left: -150px;
  top: 50%;
  margin-top: -150px;
}

Finally, the JavaScript code:

$(function() {
  $(".hit").click(function() {
    $(".maskarea").show();
  });
  $(".maskarea").click(function() {
    $(this).hide();
  });
  $('.popup').on('click', function(e){
    e.stopPropagation();
  });
});

By implementing these changes, you should have a fully functional popup.

Answer 4

You were so close to getting it right, all you needed was the close handler. Take a look at this example pen.

Here is the HTML code to use:

<a href="javascript:void(0)" class="hit">Click Me</a>
<div class="maskarea">
  <div class="popup">
  </div>
</div>

And this CSS:

.maskarea {
  width: 100%;
  height: 700px;
  background: rgba(255, 255, 255, .7);
  position: fixed;
  left: 0;
  top: 0;
  display: none;
}

.popup {
  width: 300px;
  height: 300px;
  position: fixed;
  left: 50%;
  background: #ccc;
  margin-left: -150px;
  top: 50%;
  margin-top: -150px;
}

Finally, the JavaScript code:

$(function() {
  $(".hit").click(function() {
    $(".maskarea").show();
  });
  $(".maskarea").click(function() {
    $(this).hide();
  });
  $('.popup').on('click', function(e){
    e.stopPropagation();
  });
});

By implementing these changes, you should have a fully functional popup.

Answer 5

Answer №3

One option for creating popups is to utilize various jQuery plugins such as fancybox or lightbox. However, if you prefer to create a custom popup using your own code, you can implement it like this:

    <style>
    .maskarea {
        width: 100%;
        height:700px;
        background: rgba(255, 255, 255, .7);
        position: fixed;
        left: 0;
        top: 0;
        display:none;
    }
    .popup {
        width: 300px;
        height: 300px;
        position: fixed;
        left: 50%;
        background: #ccc;
        top: 50%;
    }
    </style>
    <script>
    $(function(){
        $(".hit").click(function(){
            var windowHeight = $(window).height();  //Get current height of window or screen 
            var popup = $(".popup");    //cache the popup
            var marginTop = '-'+parseInt(popup.height()/2)+'px';  //Dynamically  get height of a popup div, and make it half for negative margin
            var marginLeft = '-'+parseInt(popup.width()/2)+'px';  //Dynamically  get width of a popup div, and make it half for negative margin
            popup.css({'margin-left':marginLeft,'margin-top':marginTop});
            $(".maskarea").height(windowHeight).show(); //assign windows height to maskarea
        })

        $(document).mouseup(function(e){
            var box = $('.popup');
            if(!box.is(e.target)&&box.has(e.target).length===0){
                $('.maskarea').hide();
            }
        })
    })
    </script>

<body>
    <a href="javascript:void(0)" class="hit">Click Me</a>
    <div class="maskarea">
        <div class="popup">

        </div>
    </div>
</body>

Answer 6

One option for creating popups is to utilize various jQuery plugins such as fancybox or lightbox. However, if you prefer to create a custom popup using your own code, you can implement it like this:

    <style>
    .maskarea {
        width: 100%;
        height:700px;
        background: rgba(255, 255, 255, .7);
        position: fixed;
        left: 0;
        top: 0;
        display:none;
    }
    .popup {
        width: 300px;
        height: 300px;
        position: fixed;
        left: 50%;
        background: #ccc;
        top: 50%;
    }
    </style>
    <script>
    $(function(){
        $(".hit").click(function(){
            var windowHeight = $(window).height();  //Get current height of window or screen 
            var popup = $(".popup");    //cache the popup
            var marginTop = '-'+parseInt(popup.height()/2)+'px';  //Dynamically  get height of a popup div, and make it half for negative margin
            var marginLeft = '-'+parseInt(popup.width()/2)+'px';  //Dynamically  get width of a popup div, and make it half for negative margin
            popup.css({'margin-left':marginLeft,'margin-top':marginTop});
            $(".maskarea").height(windowHeight).show(); //assign windows height to maskarea
        })

        $(document).mouseup(function(e){
            var box = $('.popup');
            if(!box.is(e.target)&&box.has(e.target).length===0){
                $('.maskarea').hide();
            }
        })
    })
    </script>

<body>
    <a href="javascript:void(0)" class="hit">Click Me</a>
    <div class="maskarea">
        <div class="popup">

        </div>
    </div>
</body>

The problem of creating a custom pop-up with jQuery

Answer №1

Answer №2

Answer №3

Similar questions

Updating the image source while refreshing the AJAX variable

Javascript Countdown Timer for HTML5 Canvas Animation

What is the best way to make the block rotate each time the button is clicked?

The use of DIV tags allows the element to be displayed in an inline

Using jQuery AJAX to retrieve JSON data from a REST API

Stop tooltips from appearing on hyperlinks in Internet Explorer

The absence of an eye icon in the password field when using bootstrap 5

Search for every div element and locate the ul element within it. Calculate the total number of table rows present in the ul element. Add this

AngularJS directive does not trigger when switching tabs or scrolling pages

jQuery doesn't have the capability to convert this data into JSON format

Combining the total of numerous inputs that are multiplied by a specific value all at once

Ensure that the footer remains at the bottom of the page regardless of the content above

What is the proper way to include an ID in a datepicker field along with the selected

How to retrieve the form ID in jQuery using the input ID?

Encountering a "403 Forbidden" error upon deployment to the server due to

Error message "undefined" appears when using jQuery Ajax response in Internet Explorer

Tips for maintaining the integrity of blank space within a text node?

Cheerio doesn't exit the loop prematurely

What is the best way to customize the appearance of the initial row in each tr cluster?

Show the JSON information found on a specific website URL