Share via

Popup appears behind other page contents

Donald Symmons 3,026 Reputation points
2024-12-06T10:28:55.7266667+00:00

Hello,

I was trying to create a pop-up that will pop up after the page finishes loading everything on it. But the popup and its contents hides behind, and the close (X) button does not respond.

How can I make the popup appear in front and the close (x) button to respond?

I want to achieve two things:

  1. Make the popup to appear over every other content on the page
  2. make the Close (X) button respond

This is how it pops up and displays

design

From the indicating red semi-circle, it shows there that the texts is on the popup, and not the popup being on the contents. This could be as a result of the CSS style Position I used for the divs. But How can I achieve the goal stated in my question?

Here is my Full HTML, CSS and JavaScript 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, shrink-to-fit=no" />
    <link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
    <script src="https://ajax.googleapis.com/ajax//libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet" media="all" />
    <link href="css/bootstrap.css" rel="stylesheet" media="all" />
    <title>My Designs Page</title>
    <style type="text/css">
        @keyframes slideIn {
            0% {
                transform: translateY(1rem);
                opacity: 0;
            }
            100% {
                transform: translateY(0rem);
                opacity: 1;
            }
            0% {
                transform: translateY(1rem);
                opacity: 0;
            }
        }
        @-webkit-keyframes slideIn {
            0% {
                -webkit-transform: transform;
                -webkit-opacity: 0;
            }
            100% {
                -webkit-transform: translateY(0);
                -webkit-opacity: 1;
            }
            0% {
                -webkit-transform: translateY(1rem);
                -webkit-opacity: 0;
            }
        }
        .slideIn {
            -webkit-animation-name: slideIn;
            animation-name: slideIn;
            background-color: #ffffff;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
        }
        .nav-item1 {
            float: left;
        }
        .navbar-nav1 {
            margin-right: auto;
        }
        .navbar-toggler {
            background: none;
            border: none;
        }
            .navbar-toggler:active,
            .navbar-toggler:focus {
                outline: 0;
            }
            .navbar-toggler .icon-bar {
                display: block;
                width: 22px;
                height: 2px;
                border-radius: 1px;
                margin: 4px 0 4px 0;
                transition: all 0.2s;
            }
        .navbar-dark .navbar-toggler .icon-bar {
            background: #145c7c;
        }
        .navbar-toggler .icon-bar:nth-of-type(1) {
            transform: rotate(45deg);
            transform-origin: 10% 10%;
        }
        .navbar-toggler .icon-bar:nth-of-type(2) {
            opacity: 0;
            filter: alpha(opacity=0);
        }
        .navbar-toggler .icon-bar:nth-of-type(3) {
            transform: rotate(-45deg);
            transform-origin: 10% 90%;
        }
        .navbar-toggler.collapsed .icon-bar:nth-of-type(1) {
            transform: rotate(0);
        }
        .navbar-toggler.collapsed .icon-bar:nth-of-type(2) {
            opacity: 1;
            filter: alpha(opacity=100);
        }
        .navbar-toggler.collapsed .icon-bar:nth-of-type(3) {
            transform: rotate(0);
        }
        .top-child {
            margin-top: 6%;
            border: none;
        }
        .popup {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .3);
            display: grid;
            place-content: center;
            opacity: 0;
            pointer-events: none;
            transition: 200ms ease-in-out opacity;
        }
        .popup-content {
            width: 40vw;
            background-color: #fff;
            padding: 4rem;
            box-shadow: 0 0 .5em rgba(0, 0, 0, .5);
            border-radius: .5em;
            opacity: 0;
            transform: translateY(20%);
            transition: 200ms ease-in-out opacity
                        200ms ease-in-out transform;
            position: relative;
        }
        .popup label {
            position: absolute;
            top: 2rem;
            right: 2rem;
            line-height: 1;
            cursor: pointer;
            user-select: none;
        }
        .popup label:active {
            transform: scale(.9);
        }
        .showPopup {
            opacity: 1;
            transform: translateY(0);
            pointer-events: all;
        }
    </style>
</head>
<body style="font-family: 'Graphik', sans-serif; font-size: 10pt; font-weight: 400; line-height: 25.9375px; vertical-align: baseline; letter-spacing: 0px; word-spacing: 0; text-align: start; font-style: normal; font-variant: normal; text-transform: none; text-indent: 0px;">
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div class="wrapper">
            <div class="top" style="background-color: #f4fbfd; background-size: cover; background-repeat: no-repeat;">
                <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="header" style="opacity: 0.95;">
                    <a class="navbar-brand" href="branding.com" style="font-size: 22px; font-weight: 900; margin-top: 0%;"></a>
                    <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="background-color: transparent; border: none; border-color: none; font-size: 12pt; border-width: 0px; color: #145c7c;">
                        <span class="icon-bar" style="font-size: 14pt; color: #145c7c;"></span>
                        <span class="icon-bar" style="font-size: 14pt; color: #145c7c;"></span>
                        <span class="icon-bar" style="font-size: 14pt; color: #145c7c;"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav" style="width: 100%;">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item"><a class="nav-link" href="/label">use cases&nbsp;&nbsp;</a></li>
                            <li class="nav-item"><a class="nav-link" href="/resources">Resources</a></li>
                        </ul>
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link" href="/about">About us&nbsp;&nbsp;</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/login">&nbsp;Login&nbsp;&nbsp;</a>
                            </li>
                            <li class="nav-item">
                                <asp:Button ID="newclients" runat="server" CssClass="btn btn-primary" Text="Sign up" />
                            </li>
                        </ul>
                    </div>
                </nav>
                <div class="col-sm-4" style="color: #fff;">
                </div>
                 <div class="popup">
                    <div class="popup-content">
                        <label>X</label>
                        <p style="font-size: 10pt;">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </p>
                    </div>
                </div>
                <script>
                    const popup = document.querySelector('.popup');
                    const x = document.querySelector('.popup-content h4')
                    window.addEventListener('load', () => {
                        popup.classList.add('showPopup');
                        popup.childNodes[1].classList.add('showPopup');
                    })
                    x.addEventListener('click', () => {
                        popup.classList.remove('showPopup');
                        popup.childNodes[1].classList.remove('showPopup');
                    })
                </script>
                <div class="top-child" style="width: 100%; color: #011b33;">
                    <br />
                    <div class="row col-sm-11" style="margin: 0 auto; width: 100%; padding: 6px; margin-bottom: 6%;">
                        <div class="col-sm-6" style="margin: 0 auto; padding: 6px;">
                            <div class="header-hero">
                                <br />
                                <h1 class="hero__heading">
                                    <span style="color: #145c7c;">Easy Brand Designs</span> for clothes
                                </h1>
                            </div>
                        </div>
                        <div class="col-sm-0" style="margin: 0 auto;"></div>
                        <div class="col-sm-6" style="margin: 0 auto; width: 100%; padding: 5px; border: none;">
                            <div class="img-gradient">
                                <img alt="document" src="images/homeimage.png" style="width: 100%; height: auto;" />
                            </div>
                        </div>
                    </div>
                    <br />
                </div>
            </div>
            <div id="dvMobile" class="visible-lg hidden-xl d-block d-lg-none"></div>
            <div class="subbottom" style="width: 100%; color: #011b33;">
                <br />
                <div class="row col-sm-11" style="margin: 0 auto; width: 100%; margin-top: 9%; padding: 6px;">
                    <div class="col-sm-7" style="margin: 0 auto; padding: 6px;">
                        <h2 class="sub-header">Get best Designs for your clothes
                        </h2>
                        <p class="body-text" style="margin: 0 auto; margin-top: 3%;">
                             1st-century BC text by the Roman statesman and philosopher Cicero
                        </p>
                    </div>
                    <div class="col-sm-5" style="margin: 0 auto; padding: 6px;"></div>
                </div>
                <div class="row col-sm-11" style="margin: 0 auto; width: 100%; padding: 6px; margin-bottom: 8%; margin-top: -2%;">
                    <div class="starting col-sm-6" style="margin: 0 auto; margin-top: 5%; margin-bottom: 1%; padding: 5px;">
                        <div class="cart" style="width: auto; margin: 0 auto; border-radius: 8px; backdrop-filter: blur(8px); background: rgba(255, 255, 255, 0.05); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); backface-visibility: hidden;">
                            <img alt="document" src="images/Img/clothes.png" style="width: 100%; height: auto; border-radius: 8px;" />
                        </div>
                    </div>
                    <div class="col-sm-1" style="margin: 0 auto;"></div>
                    <div class="col-sm-5" style="margin: 0 auto; padding: 5px; margin-top: 5%;">
                        <h3>Clothes Designs Essentials</h3>
                        <div class="" style="margin-top: 1%; margin: 0 auto;">
                            <p style="margin: 0 auto; margin-top: 5%;">
                                Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development to fill empty spaces in a layout that do not yet have content.
                            </p>
                            <br />
                        </div>
                    </div>
                </div>
                <br />
            </div>
        </div>
    </form>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(window).scroll(function () {
            if ($(window).scrollTop() >= 30) {
                $('.navbar').css('background', '#ffffff');
                $('.nav-link').css('color', '#011B33');
                $('.navbar-brand').css('color', '#011B33');
            } else {
                if ($('#dvMobile').is(':hidden')) {
                    $('.navbar').css('background', 'transparent');
                    $('.nav-link').css('color', '#011B33');
                    $('.navbar-brand').css('color', '#011B33');
                }
            }
        });
        $(window).resize(function () {
            MobileNavColor();
        });
        $(function () {
            MobileNavColor();
        });
        function MobileNavColor() {
            if (!$('#dvMobile').is(':hidden')) {
                $('.navbar').css('background', '#ffffff');
                $('.nav-link').css('color', '#011B33');
                $('.navbar-brand').css('color', '#011B33');
            } else {
                $('.navbar').css('background', 'transparent');
                $('.nav-link').css('color', '#011B33');
                $('.navbar-brand').css('color', '#011B33');
            }
        }
    </script>
    </body>
</html>
.NET
.NET
Microsoft Technologies based on the .NET software framework.
4,012 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,550 questions
0 comments
Accepted answer
  1. AgaveJoe 28,961 Reputation points
    2024-12-06T16:21:45.74+00:00

    Try setting the z-index to move the popup layer on top of the others.

            .popup {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .3);
            display: grid;
            place-content: center;
            opacity: 0;
            pointer-events: none;
            transition: 200ms ease-in-out opacity;
            z-index: 1!important;
        }

    The X button does response because it is not wired up to a handler. The X is in a label not an h4.

    const x = document.querySelector('.popup-content label')

    The design is a bit confusing so I'm not sure if these changes will cause other downstream issues.

1 additional answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Bruce (SqlWork.com) 68,721 Reputation points
    2024-12-08T01:56:15.0433333+00:00

    You need to study the z-index rules and what defines the stacking context used for the z-index.

    https://web.dev/learn/css/z-index

    the easy fix, that most popup libraries use is to move the popup div to the end of the body. You can also use popular popper library which does not require moving the div

    https://popper.js.org/docs/v2/

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.