Launch a new pop-up window that will disappear once the user clicks outside of the window

Question

Launch a new pop-up window that will disappear once the user clicks outside of the window

In my Java web application, I'm attempting to create a pop-up window that appears over the parent window when a user clicks on a link. The pop-up window will display values fetched from a database using Hibernate, and the user can select a value. Once the user selects a value and clicks the "OK" button within the pop-up window or anywhere outside it or in the parent window, the pop-up will hide.

javascript html css jsp

Answer 1

Answer №1

To ensure that your wrapper element covers your parent window but stays below the popup window, follow these steps:

First, create a wrapper element with a higher z-index than the parent window.

Add an event listener for "click" to this wrapper element.

If the click target matches the wrapper element, close the popup and delete the wrapper element itself.

This setup will manage clicks outside of the popup effectively.

Remember to handle other events within your window accordingly.

Additional Styles

        html {
            height: 100%;
        }

        body {
            position: relative;
            height: 100%;
            z-index: 1;
        }

        #overlay {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(0,0,0,0.25);
            z-index: 99;
        }

        #popup {
            position: absolute;
            width: 20%;
            height: 20%;
            top: 40%;
            left: 40%;
            background: rgb(220,220,220);
            box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
            z-index: 100;
        }

HTML Code

<input id="popupbutton" type="button" value="pop me up" />

Javascript Logic

<script>
        document.getElementById('popupbutton').addEventListener('click', loadPopup, true);

        function loadPopup(e) {
            e.preventDefault();
            e.stopPropagation();

            var overlay = document.createElement('div');
                overlay.id = 'overlay';
                overlay.addEventListener('click', closePopup, true);

            var popup = document.createElement('div');
                popup.id = 'popup';

            document.body.appendChild(overlay);
            document.body.appendChild(popup);

            function closePopup(e) {
                e.preventDefault();
                e.stopPropagation();

                // Close everything only if clicked on overlay
                if (e.target.id === 'overlay') {
                    document.body.removeChild(popup);
                    document.body.removeChild(overlay);
                }
            }
        }
    </script>

Updated JS Fiddle Link http://jsfiddle.net/md063bfr/1/

Answer 2

To ensure that your wrapper element covers your parent window but stays below the popup window, follow these steps:

First, create a wrapper element with a higher z-index than the parent window.

Add an event listener for "click" to this wrapper element.

If the click target matches the wrapper element, close the popup and delete the wrapper element itself.

This setup will manage clicks outside of the popup effectively.

Remember to handle other events within your window accordingly.

Additional Styles

        html {
            height: 100%;
        }

        body {
            position: relative;
            height: 100%;
            z-index: 1;
        }

        #overlay {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(0,0,0,0.25);
            z-index: 99;
        }

        #popup {
            position: absolute;
            width: 20%;
            height: 20%;
            top: 40%;
            left: 40%;
            background: rgb(220,220,220);
            box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
            z-index: 100;
        }

HTML Code

<input id="popupbutton" type="button" value="pop me up" />

Javascript Logic

<script>
        document.getElementById('popupbutton').addEventListener('click', loadPopup, true);

        function loadPopup(e) {
            e.preventDefault();
            e.stopPropagation();

            var overlay = document.createElement('div');
                overlay.id = 'overlay';
                overlay.addEventListener('click', closePopup, true);

            var popup = document.createElement('div');
                popup.id = 'popup';

            document.body.appendChild(overlay);
            document.body.appendChild(popup);

            function closePopup(e) {
                e.preventDefault();
                e.stopPropagation();

                // Close everything only if clicked on overlay
                if (e.target.id === 'overlay') {
                    document.body.removeChild(popup);
                    document.body.removeChild(overlay);
                }
            }
        }
    </script>

Updated JS Fiddle Link http://jsfiddle.net/md063bfr/1/

Answer 3

Answer №2

One way to utilize a div element is as follows:

<td>
  <div align="center" id="show_more" style="background-color: blue;display:none;width:550px;height:250px;top:80px;overflow: auto;">
    Insert your content here
  </div>
</td>

Then, use a JavaScript function to toggle the display property from none to show:

function DisplayDiv(){
            Show.show('show_more');
        }

That's all for now. Thank you.

Answer 4

One way to utilize a div element is as follows:

<td>
  <div align="center" id="show_more" style="background-color: blue;display:none;width:550px;height:250px;top:80px;overflow: auto;">
    Insert your content here
  </div>
</td>

Then, use a JavaScript function to toggle the display property from none to show:

function DisplayDiv(){
            Show.show('show_more');
        }

That's all for now. Thank you.

Launch a new pop-up window that will disappear once the user clicks outside of the window

Answer №1

Answer №2

Similar questions

Make sure to remain in the same division area when refreshing the page

Having trouble with KnockoutJS and its foreach functionality

How can JavaScript/jQuery be used to update LocalStorage Objects when editing a form?

On one webpage, IE 11 is correctly styling certain visited hyperlinks while failing to do so for others

Open a submenu when clicking on an input field and automatically close it when the focus is lost

Validation for a datepicker embedded within a table

"Commitment made ahead of time without allowing for the outcome to

Getting a hold of an Array value from an external scope in Angular JS

How to trigger an Angular JS route without loading a view

JavaScript/CSS memory matching game

How does the functionality of $.ajax differ from that of $.get?

Is there a way to retrieve the device id in a React JS application?

Combing external JavaScript with React functionality

Creating distinctive HTML identifiers with a PHP loop

How to display a conditional component in a single line with Material UI

Does Three.js lighting adjust according to the bundler used?

Vue.JS has issued a warning indicating that the `util._extend` API is no longer supported. To address this, developers are advised to utilize Object

Changing the Color of Material-UI Slider: A Step-by-Step Guide

CSS in flexbox nested with no overflow utilized

Is it possible to retain the placeholder text if the user selects the input field and the value is left empty?