Creating a Popup with a Hazy Background: A Step-by-Step Guide

I've been working on implementing a popup on my existing page that opens 4.5 seconds after the page loads. I want to add a blur effect to the background when the popup appears. I've tried various methods to add the blur effect to the main div, but it seems that the popup itself is getting blurred instead of the main background div. Below is the code snippet of what I have tried so far.

function PopUp(hideOrshow) {
        if ( hideOrshow == 'hide' )document . getElementById( 'ac-wrapper' ) . style . display = "none";
        else document . getElementById( 'ac-wrapper' ) . removeAttribute( 'style' );
    }
    window . onload = function () {
        setTimeout( function () {
            PopUp( 'show' );
        }, 4500 );
    }
#ac-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .6);
            z-index: 1001;
            -webkit-filter: blur(2px);
               -moz-filter: blur(2px);
                 -o-filter: blur(2px);
                -ms-filter: blur(2px);
                    filter: blur(2px);
        }
        #popup {
            width: 555px;
            background: #f6f6f6;
            border-radius: 25px;
            -moz-border-radius: 25px;
            -webkit-border-radius: 25px;
            box-shadow: #64686e 0px 0px 3px 3px;
            -moz-box-shadow: #64686e 0px 0px 3px 3px;
            -webkit-box-shadow: #64686e 0px 0px 3px 3px;
            position: relative;
            top: 20%;
            left: 36%;
            padding: 25px;
            /*-webkit-filter: blur(0);
               -moz-filter: blur(0);
                 -o-filter: blur(0);
                -ms-filter: blur(0);
                    filter: blur(0);*/
        }
        .popup-close {
            width: 20px;
            float: right;
        }
        .popup-logo {
            width: 180px;
            margin-top: 25px;
        }
        .pmh-top {
            margin-top: 20px;
            color: #4D4D4E;
        }
        .pmp-top {
            margin-top: 10px;
        }
        .pm-list {
            list-style: none;
            margin-left: 0px;
            padding-left: 0px;
        }
        .pm-list li {
            height: 40px;
            margin-bottom: 10px;
            padding-left: 45px;
            padding-top: 10px;
        }
        .reference-id {
            background-image: url("<?php echo base_url(); ?>assets/frontend/images/popup/reference-id.png");
        }
        .company-info {
            background-image: url("<?php echo base_url(); ?>assets/frontend/images/popup/company-info.png");
        }
        .reference-id,
        .company-info {
            background-repeat: no-repeat;
            background-size: auto;
        }
        .popup-field {
            text-align: center;
        }
        .popup-btn {
            width: 100% !important;
            background-color: #27546B !important;
            color: #FFFFFF !important;
        }
        .pmp-bottom {
            font-size: 11px;
            line-height: 17px;
            margin-top: -10px;
        }
        .blur {
            -webkit-filter: blur(2px);
               -moz-filter: blur(2px);
                 -o-filter: blur(2px);
                -ms-filter: blur(2px);
                    filter: blur(2px);
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>this is complete website normal background page, I am trying to blur<div>


<div id="ac-wrapper" style='display:none;'>
    <div id="popup">
        <a href="<?php echo base_url() ; ?>"><img src="<?php echo base_url() ; ?>assets/frontend/images/popup/cross-icon.png" alt="close popup" class="popup-close" /></a>
        <img src="<?php echo base_url() ; ?>assets/frontend/images/popup/logo.png" alt="logo" class="popup-logo" />
        <h2 class="pmh-top">We'll email prices for safe keeping!</h2>
        <p class="pmp-top">The email contains the following</p>
        <ul class="pm-list">
            <li class="reference-id">Your reference ID for quick booking</li>
            <li class="company-info">Information regarding Us</li>
        </ul>
        <form method="post">
            <input type="email" placeholder="Enter your email address" class="popup-field" />
            <input type="submit" value="View Prices Now" class="popup-btn" onClick="PopUp('hide')" />
        </form>
        <p class="pmp-bottom">Keeping your information safe is key to us, all information you entered will be kept safe in compliance to law.</p>
    </div>
</div>

Despite my best efforts, the popup is getting blurred instead of the background. Any assistance on this issue would be greatly appreciated. Thank you in advance!

javascripthtmlcsspopupblur

Answer №1

During testing, I modified the timer to 1 so the popup appears immediately.

However, the ideal approach is to create a separate div with no content, positioned below the popup, and apply a blur effect to it.

function PopUp(hideOrshow) {
  if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
  else document.getElementById('ac-wrapper').removeAttribute('style');
}
window.onload = function() {
  setTimeout(function() {
    PopUp('show');
  }, 1);
}
#ac-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1001;
}

#overlay {
  width: 100vw;
top:0;
left:0;
  height: 100vh;
  position: absolute;
  z-index: 1002;
  background: rgba(0, 0, 0, .6);
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}

#popup {
  width: 555px;
  background: #f6f6f6;
  border-radius: 25px;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  box-shadow: #64686e 0px 0px 3px 3px;
  -moz-box-shadow: #64686e 0px 0px 3px 3px;
  -webkit-box-shadow: #64686e 0px 0px 3px 3px;
  position: relative;
  z-index:1003;
  top: 20%;
  left: 36%;
  padding: 25px;
  /*-webkit-filter: blur(0);
               -moz-filter: blur(0);
                 -o-filter: blur(0);
                -ms-filter: blur(0);
                    filter: blur(0);*/
}

.popup-close {
  width: 20px;
  float: right;
}

.popup-logo {
  width: 180px;
  margin-top: 25px;
}

.pmh-top {
  margin-top: 20px;
  color: #4D4D4E;
}

.pmp-top {
  margin-top: 10px;
}

.pm-list {
  list-style: none;
  margin-left: 0px;
  padding-left: 0px;
}

.pm-list li {
  height: 40px;
  margin-bottom: 10px;
  padding-left: 45px;
  padding-top: 10px;
}

.reference-id {
  background-image: url("<?php echo base_url(); ?>assets/frontend/images/popup/reference-id.png");
}

.company-info {
  background-image: url("<?php echo base_url(); ?>assets/frontend/images/popup/company-info.png");
}

.reference-id,
.company-info {
  background-repeat: no-repeat;
  background-size: auto;
}

.popup-field {
  text-align: center;
}

.popup-btn {
  width: 100% !important;
  background-color: #27546B !important;
  color: #FFFFFF !important;
}

.pmp-bottom {
  font-size: 11px;
  line-height: 17px;
  margin-top: -10px;
}

.blur {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>this is complete website normal background page, I am trying to blur
  <div>


    <div id="ac-wrapper" style='display:none;'>
      <div id="overlay"></div>
      <div id="popup">
        <a href="<?php echo base_url() ; ?>"><img src="<?php echo base_url() ; ?>assets/frontend/images/popup/cross-icon.png" alt="close popup" class="popup-close" /></a>
        <img src="<?php echo base_url() ; ?>assets/frontend/images/popup/logo.png" alt="logo" class="popup-logo" />
        <h2 class="pmh-top">We'll email prices for safe keeping!</h2>
        <p class="pmp-top">The email contains the following</p>
        <ul class="pm-list">
          <li class="reference-id">Your reference ID for quick booking</li>
          <li class="company-info">Information regarding Us</li>
        </ul>
        <form method="post">
          <input type="email" placeholder="Enter your email address" class="popup-field" />
          <input type="submit" value="View Prices Now" class="popup-btn" onClick="PopUp('hide')" />
        </form>
        <p class="pmp-bottom">Keeping your information safe is key to us, all information you entered will be kept safe in compliance to law.</p>
      </div>
    </div>

Answer №2

One suggestion is to place the popup at the beginning of the sequence and then blur anything that follows:

Here is what the code proposes:

function PopUp(hideOrshow) {
  if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
  else document.getElementById('ac-wrapper').removeAttribute('style');
}
window.onload = function() {
  setTimeout(function() {
    PopUp('show');
  }, 4500);
}
#ac-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .6);
  z-index: 1001;
}
/* CSS styling continues... */

/* jQuery library link */

Answer №3

I made some modifications to the script and found a solution that worked well for me. Here is the updated version of the script:

function PopUp(hideOrshow) {
    if ( hideOrshow == 'hide' )document . getElementById( 'ac-wrapper' ) . style . display = "none";
    else document . getElementById( 'ac-wrapper' ) . removeAttribute( 'style' );
    

    //Added this new part
    if ( hideOrshow == 'show' ) {
        $("#wrapper").addClass('blur');
    } else {
        $("#wrapper").removeClass('blur');
    }
}
window.onload = function () {
    setTimeout(function () {
        PopUp('show');
    }, 4500);
}

I also updated a CSS class for the main div:

#wrapper.blur {
        -webkit-filter: blur(8px);
           -moz-filter: blur(8px);
             -o-filter: blur(8px);
            -ms-filter: blur(8px);
                filter: blur(8px);
    }

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

Autocomplete Dropdown Options

I am trying to create a dependent autocomplete drop-down that displays suggestions based on any typed letter, rather than just the first letter. For example, if I type "Yo," it should show "New York" in the dropdown. Below is the code I have been using, ...

javascriptphpjqueryajax

Modifying object parameters in an array based on their similarity: A guide

I've encountered an array of objects like this: const data = [ { position: 1, name: "a", score: 9000 }, { position: 2, name: "b", score: 8000 }, { position: 3, name: "c", score: 6000 }, { position: 3, name: " ...

javascriptarrays

Utilize jQuery to transform array values into date objects

I am receiving an array from a .net controller. The values I am getting for dates are: /Date(1445256000000)/ and /Date(1445256900000)/ Instead of this, I need to convert these into proper date values. Now that I have an array of objects, I want to upda ...

javascriptjqueryarraysjson

Edit esri pop-up template

Can I customize the popupTemplate in Esri to match my design? I currently have a popupTemplate set up like this: popupTemplate: { content: [{ type: "fields", fieldInfos: [{ fieldName: "Name" ...

javascriptreactjsarcgisesri

Utilize Angular to simultaneously filter search results by URL and make selections in a dropdown menu

As a newcomer to the Angular JS framework, I have successfully created a client-company table where clients can be filtered by company name using a drop-down menu. However, I am now looking to implement a filtering mechanism based on the URL structure su ...

javascriptjqueryjsonangularjsfrontend

What is the best way to position an image alongside an h2 heading?

Perhaps the technology stack is not relevant in this case, but I am currently working on a nextjs project with tailwind for styling. I am attempting to place an image next to an h2 tag, but encountering unexpected behavior from the image. It seems as thoug ...

htmlcssnext.jstailwind-css

Reorganize Material UI Grid Items with varying lengths

I'm currently working with a Material UI grid system that appears as shown below: <> <Typography gutterBottom variant='h6'> Add New User{' '} </Typography> <Grid container spacing={3} ...

javascriptcssreactjsmaterial-ui

I used the `MyWindow=window.open` function to display a pop-up window and then navig

On my webpage (http://localhost:8088/hse/public/explorer), I have implemented two buttons: When these buttons are clicked, a new pop-up window will open at (http://localhost:8088/hse/public/explorer/1) onClick="MyWindow=window.open('http://local ...

javascriptjqueryhtml

Restrict the character count in Vue Material chips

Currently, I am utilizing the Vue Material Chips component to gather string arrays. My goal is to limit the character length of each string within the array to 30 characters. The component offers a md-limit prop which restricts the number of strings in th ...

javascriptvue.jsvue-material

Tips for limiting the maximum number of characters in CkEditor 5 for react js

Is there a way to limit the amount of characters in a CKEditor textarea in a React JS environment? I'm trying to set a maximum character count for the text area in CKEditor Does anyone have any examples or suggestions on how to achieve this? retur ...

javascriptreactjsckeditor

Various titles utilized in Axios patch requests

After spending an hour exploring the Chrome console, I'm still unable to pinpoint the source of this bug. I'm in the final stages of updating the OAuth implementation in my Vue app. It all started when socialLink.js discovered the need to creat ...

javascriptvue.jsaxios

How to Choose a Radio Button from a Group using Selenium WebDriver and Java

My goal is to be able to choose a specific radio button from a set of radio buttons grouped by the name attribute: <div> <input type="radio" name="exampleInputRadio" id="optionRadio1" value="1"> <input type="radio" name="exampleInpu ...

javahtmlseleniumselenium-webdriverwebdriver

The PointerLockControls feature seems to be failing to actually lock my pointer

Uncaught TypeError: THREE.PointerLockControls is not a constructor I'm facing an issue with using firstperson controls and I can't seem to figure out the reason behind it. It's really throwing me off. const THREE = require('THREE&ap ...

javascriptthree.js

Eliminate any empty spaces and gaps present between div elements

Is there a way to eliminate the spaces between div containers at the bottom part of the div with a red border? The following code snippets utilize materializecss. /*############################ LOGIN STYLE ############################*/ body{ font: ...

htmlcssmaterialize

Perform a function on Angular 5

In my database, there is a table named settings. I have 2 backend endpoints: one for getting settings and another for updating settings. Now I am working on creating an Angular window to edit this table. I've set up an Angular Service to retrieve va ...

htmlangulartypescriptfrontend

Prevent the SnackBar from extending to full width in case of a smaller window size

Is there a solution to prevent the SnackBar from spanning the entire width of the screen when the window is narrow? ...

javascriptreactjsmaterial-uisnackbar

What is the best way to set up the correct pathway for displaying the image?

I'm currently facing a challenge with displaying an image from my repository. The component's framework is stored in one library, while I'm attempting to render it in a separate repository. However, I am struggling to determine the correct p ...

javascriptcssreactjsmaterial-ui

Obtain the data from the hyperlink destination

Having some trouble extracting a value from an href link to use in my database operations. Unfortunately, I couldn't retrieve the desired value. Displayed below is the code for a button: <a class="btn btn-info" href="scheduleSetTime.php?id=&apo ...

javascriptphpjqueryhtml

The functionality of the tree-view feature in NodeJs is experiencing glitches

My attempt at creating a Tree-view has hit a snag. The collapse icon is not being displayed as expected. Here is the code snippet I tried: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootst ...

javascriptcssbootstrap-4treeview

The Server Components render encountered a glitch

Screenshot of the errorI am encountering a strange error only in the production environment. The lack of additional information leads me to believe it may be due to security measures put in place for production. Unfortunately, I have been unable to repli ...

javascripttypescriptnext.jsnext.js13react-server-components