Home > database >  How to fade background when popup appears
How to fade background when popup appears

Time：11-15

I have a multipart form on my website which contains a few separate 'information popups'.

In this stripped down example, I only included two of the popups... the 'Privacy Policy' popup and the 'Terms and Conditions' popup.

I am trying to 'blur' or 'fade' everything except the popups, when they are individually displayed.

I have tried a few code suggestions I found on the internet, but after a few days of extensive experimentation and failures with each of them, I decided to post my question without those examples, and see if anyone else has any better suggestions from scratch.

If anyone can help or point me in the right direction... it would be much appreciated.

I apologize in advance for the lengthy code.

Thanks, Maddison

HTML

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">

<!-- Start Stylesheet -->

<link rel="stylesheet" href="/css/fadetest2.css">

<!-- End Stylesheet -->

<!-- Start Font Codes -->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Niconne&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2? 
family=Roboto Flex:opsz,[email protected],100;8..144,700&display=swap" rel="stylesheet">

<!-- End Font Codes -->

</head>



<!-- // START BODY AND CONTENT // -->

<body>

<div >

<div ></div>



<!-- // START FORM CONTAINER // -->

<div >



<!-- // START HEADER // -->

<div ><div >Fade Test</div></div>


<!-- // END HEADER // -->



<!-- // START FORM INFORMATION // -->


<div >

<div ><p >

Please fill out the form below.<br><br>

</p></div>

</div>


<!-- // END FORM INFORMATION // -->



<!-- // START PRIVACY POLICY // -->


<div >

<div >

<div ><a  onclick="privacyFunction()">Privacy Policy</a> 
</div>

<p  id="privacyPopup_text">

<b>PRIVACY POLICY</b><br><br>

This is some privacy policy information.<br><br>

This is some privacy policy information.<br><br>

This is some privacy policy information.<br><br>

This is some privacy policy information.<br><br>

This is some privacy policy information.<br><br>

This is some privacy policy information.<br><br>

This is some privacy policy information.<br><br><br>

<a  onclick="privacyFunction()">Close &#8999;</a>

</p>

</div>

<script>

// Start - Privacy Popup function //

function privacyFunction() {

var popup = document.getElementById("privacyPopup_text");

popup.classList.toggle("show");

}

// End - Privacy Popup function //

</script>

</div>

<!-- // END PRIVACY POLICY // -->



<!-- // START USER INFORMATION // -->


<div >


<div ></div>


<div ><div >Contact Information</div>

</div>


<!-- Start userName Field -->

<div ><input type="text" id="userName" name="userName" 
 placeholder=" Your Name" required></div>

<!-- End userName Field -->


<!-- Start userEmail Field -->

<div ><input type="email" id="userEmail" name="userEmail" 
 placeholder=" [email protected]" required></div>

<!-- End userEmail Field -->


<!-- // END USER INFORMATION // -->



<!-- // START TERMS & CONDITIONS // -->


<div >

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

<div >

<div ><input type="checkbox" id="termsCheckbox" name="termsCheckbox" 
 value="Yes" required><a >I Agree to the&nbsp;</a><a 
 onclick="termsFunction()">Terms and Conditions</a></div>

<p  id="termsPopup_text">

<b>TERMS and CONDITIONS</b><br><br>

By submitting this form, you agree that;<br><br> 

This is some terms and conditions info.<br><br>

This is some terms and conditions info.<br><br>

This is some terms and conditions info.<br><br>

This is some terms and conditions info.<br><br>

This is some terms and conditions info.<br><br>

This is some terms and conditions info.<br><br><br>

<a  onclick="termsFunction()">Close &#8999;</a>

</p>

</div>

<script>

// Start - Terms Popup function //

function termsFunction() {
var popup = document.getElementById("termsPopup_text");
popup.classList.toggle("show");

}

// End - Terms Popup function //

</script>


</div>

<!-- // END TERMS & CONDITIONS // -->




<!-- // START SUBMIT BUTTON // -->

<div ><input type="submit" id="submitButton" name="submitButton" 
 value="Submit"></div>

<!-- // END SUBMIT BUTTON // -->


</div>


</body>
</html>

CSS

body{

margin: 0px;
background-color: #ff78ae;
background-image: url("https://img.freepik.com/free-vector/pattern-with-black-stars-white- 
background_1110-366.jpg?w=2000");   
background-repeat: round;
display: flex;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;

}

.pageContainer {

width: 100%;
margin: auto;
position: relative;
align-items: center;

}

.formContainer {

width: 92%;
max-width: 340px;
margin: auto;
margin-top: 10px;
position: relative;
background-color: #555555;
padding-left: 8px;
padding-right: 8px;
border:solid 2pt;
border-color: #cdcdcd;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

box-shadow: 2px 4px 8px 2px rgba(0,0,0,0.5);

}

.left_Wrapper {

display: flex;
justify-content: left;
align-items: left;
width: 100%;
margin: auto;

}

.center_Wrapper {

display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: auto;

}

.formHeader {

width:100%;
margin-top: 10px;
margin-bottom:10px;
text-align: center;
color: #cdcdcd;
font-family: 'Roboto Flex', sans-serif;
font-size: 14pt;
font-weight:bold;

}

.spacer {

width: 100%;
height: 2px;
background-color: #cdcdcd;
margin-top: 10px;

}

.blankSpace {

width: 100%;
margin-top: 10px;

}

/* // START SECTION CONTAINERS // */


.formInfo_Container {width:100%;}

.privacy_Container {width: 100%;}

.userInformation_Container {width: 100%;}

.terms_Container {width: 100%;}


/* // END SECTION CONTAINERS // */



/* // START PRIVACY POLICY // */


/* privacyPopup Container */

.privacyPopup {

display: flex;
position: relative;
justify-content: center;
align-items: center;
width: 100%;
margin: auto;
margin-top: 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;


}

.privacyWrap{

width: 100%;
margin-bottom: 10px;
vertical-align: middle;

}

.privacyText{

font-family: arial;
font-size: 12pt;
color: #e6e6e6;
vertical-align: middle;

}


.privacyLink{

font-family: arial;
font-size: 12pt;
color: #e6e6e6;
text-decoration: underline;
vertical-align: middle;
cursor: pointer;

}

.privacyLink:hover{

color: #ffffff;

}

.privacyCheckbox{

vertical-align: middle;
margin-right: 15px;

}


/* privacyPopup (actual popup) */


.privacyPopup .privacyPopup_text {

visibility: hidden;
width: 95%;
height: 350px;
background-color: #8f8f8f;
font-family: arial;
color: #e6e6e6;
text-align: left;
border-radius: 5px;
padding: 8px 8px 8px 8px;
position: absolute;
z-index: 1;
bottom: -1000%;
overflow:auto;
border: solid 2px;

}


/* Toggle this class - hide and show the popup */

.privacyPopup .show {

visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;


}

/* Add animation (fade in the popup) */

@-webkit-keyframes fadeIn {
from {opacity: 0;} 
to {opacity: 1;}


}

@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}


}

.privacyPopup_close{

color: #e6e6e6; 
cursor: pointer;

}

.privacyPopup_close:hover{

color: #ffffff;

}

/* // END PRIVACY POLICY // */


.formInstructions {

width:100%;
margin-top: 10px;
margin-bottom:10px;
text-align: left;
color: #cdcdcd;
font-family: arial;
font-size: 12pt;

}

.inputField_Wrapper {

display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: auto;

}

.inputField {

width: 100%;
margin-top: 10px;
margin-bottom:10px;
padding:5px;
color: #8f8f8f;
font-family: arial;
font-size: 12pt;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: none;
outline: none;
background-color: #ffffff;

}

.inputField:hover {

background-color: #ffffe0;

}

.inputField2 {

width: 100%;
margin-top: 10px;
margin-bottom:10px;
padding:5px;
color: #8f8f8f;
font-family: arial;
font-size: 12pt;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: none;
outline: none;
background-color: #ffffff;
cursor: pointer;

}

.inputField2:hover {

background-color: #ffffe0;

}

.section_Header {

width:100%;
margin-top: 10px;
margin-bottom:10px;
text-align: left;
color: #cdcdcd;
font-family: 'Roboto Flex', sans-serif;
font-size: 14pt;
font-weight:bold;

}


/* // START TERMS AND CONDITIONS // */


/* termsPopup Container */


.termsPopup {

display: flex;
position: relative;
justify-content: center;
align-items: center;
width: 100%;
margin: auto;
margin-top: 30px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

}

.termsWrap{

width: 100%;
height: 20px;
background-color: #8f8f8f;
padding: 5px;
color: #e6e6e6;
border: solid 2px;
border-radius: 4px;
margin-bottom: 50px;
vertical-align: middle;

}


.termsText{

font-family: arial;
font-size: 12pt;
color: #e6e6e6;
vertical-align: middle;

}

.termsLink{

font-family: arial;
font-size: 12pt;
color: #e6e6e6;
text-decoration: underline;
vertical-align: middle;
cursor: pointer;

}

.termsLink:hover{

color: #ffffff;

}

.termsCheckbox{

vertical-align: middle;
margin-right: 15px;

}

/* termsPopup (actual popup) */

.termsPopup .termsPopup_text {

visibility: hidden;
width: 95%;
height: 350px;
background-color: #8f8f8f;
font-family: arial;
color: #e6e6e6;
text-align: left;
border-radius: 5px;
padding: 8px 8px 8px 8px;
position: absolute;
z-index: 1;
bottom: -10%;
overflow:auto;
border: solid 2px;

}

/* Toggle this class - hide and show the popup */

.termsPopup .show {

visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;

}

/* Add animation (fade in the popup) */

@-webkit-keyframes fadeIn {
from {opacity: 0;} 
to {opacity: 1;}

}

@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}

}

.termsPopup_close{

color: #e6e6e6; 
cursor: pointer;

}

.termsPopup_close:hover{

color: #ffffff;

}

/* // END TERMS AND CONDITIONS // */



/* // START SUBMIT BUTTON // */

.submit__button {

width: 100%;
height: 40px;
background: #0c2d1c;
border: solid 2px; 
border-radius: 8px;
outline: none;
color: #ffffff;
font-size: 12pt;
font-family: Arial;
font-weight: bold;
cursor: pointer;
margin-bottom: 30px;
box-shadow: 2px 4px 8px 2px rgba(0,0,0,0.5);

}

.submit__button:hover {

background: #124429;

}

.submit__button:active {

background: #185a37;

}

/* // END SUBMIT BUTTON // */

CodePudding user response：

Add this class to your CSS

.blurry{
    filter: blur(5px);
  }

then replace your HTML with this and you are done.

<!DOCTYPE html>

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">

  <!-- Start Stylesheet -->

  <link rel="stylesheet" href="/css/fadetest2.css">

  <!-- End Stylesheet -->

  <!-- Start Font Codes -->

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Niconne&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2? 
family=Roboto Flex:opsz,[email protected],100;8..144,700&display=swap" rel="stylesheet">

  <!-- End Font Codes -->

</head>

<!-- // START BODY AND CONTENT // -->

<body>

  <div >

    <div ></div>



    <!-- // START FORM CONTAINER // -->

    <div >



      <!-- // START HEADER // -->

      <div  id="bl">
        <div >Fade Test</div>
      </div>


      <!-- // END HEADER // -->



      <!-- // START FORM INFORMATION // -->


      <div  id="bl">

        <div >
          <p >

            Please fill out the form below.<br><br>

          </p>
        </div>

      </div>


      <!-- // END FORM INFORMATION // -->



      <!-- // START PRIVACY POLICY // -->


      <div  >

        <div >

          <div  id="bl"><a  onclick="privacyFunction()">Privacy Policy</a>
          </div>

          <p  id="privacyPopup_text">

            <b>PRIVACY POLICY</b><br><br>

            This is some privacy policy information.<br><br>

            This is some privacy policy information.<br><br>

            This is some privacy policy information.<br><br>

            This is some privacy policy information.<br><br>

            This is some privacy policy information.<br><br>

            This is some privacy policy information.<br><br>

            This is some privacy policy information.<br><br><br>

            <a  onclick="privacyFunction()">Close &#8999;</a>

          </p>

        </div>

        <script>

          // Start - Privacy Popup function //

          function privacyFunction() {

            var popup = document.getElementById("privacyPopup_text");
            popup.classList.toggle("show");
            var bl = document.querySelectorAll('[id=bl]');
            for(var i = 0; i < bl.length; i  ) {
              bl[i].classList.toggle('blurry');
            }
            

          }

// End - Privacy Popup function //

        </script>

      </div>

      <!-- // END PRIVACY POLICY // -->



      <!-- // START USER INFORMATION // -->


      <div >


        <div ></div>


        <div  id="bl">
          <div >Contact Information</div>

        </div>


        <!-- Start userName Field -->

        <div  id="bl"><input type="text" id="userName" name="userName" 
            placeholder=" Your Name" required></div>

        <!-- End userName Field -->


        <!-- Start userEmail Field -->

        <div  id="bl"><input type="email" id="userEmail" name="userEmail" 
            placeholder=" [email protected]" required></div>

        <!-- End userEmail Field -->


        <!-- // END USER INFORMATION // -->



        <!-- // START TERMS & CONDITIONS // -->


        <div >

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

          <div >

            <div  id="bl"><input type="checkbox" id="termsCheckbox" name="termsCheckbox" 
                value="Yes" required><a >I Agree to the&nbsp;</a><a 
                onclick="termsFunction()">Terms and Conditions</a></div>

            <p  id="termsPopup_text">

              <b>TERMS and CONDITIONS</b><br><br>

              By submitting this form, you agree that;<br><br>

              This is some terms and conditions info.<br><br>

              This is some terms and conditions info.<br><br>

              This is some terms and conditions info.<br><br>

              This is some terms and conditions info.<br><br>

              This is some terms and conditions info.<br><br>

              This is some terms and conditions info.<br><br><br>

              <a  onclick="termsFunction()">Close &#8999;</a>

            </p>

          </div>

          <script>

            // Start - Terms Popup function //

            function termsFunction() {
              var popup = document.getElementById("termsPopup_text");
              popup.classList.toggle("show");
              var bl = document.querySelectorAll('[id=bl]');
            for(var i = 0; i < bl.length; i  ) {
              bl[i].classList.toggle('blurry');
            }

            }

// End - Terms Popup function //

          </script>


        </div>

        <!-- // END TERMS & CONDITIONS // -->




        <!-- // START SUBMIT BUTTON // -->

        <div  id="bl"><input type="submit" id="submitButton" name="submitButton" 
            value="Submit"></div>

        <!-- // END SUBMIT BUTTON // -->


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

</body>

</html>

CodePudding user response：

here is

Make Background Black for screen other than popup div

or use CSS solution is easier... Modal Dialog with click-through grey-out background

* {
  margin: 0;
  padding: 0;
}
.box {
  height: 100vh;
  transition: background .25s ease;
}
.box:hover {
  background: #f00;
}
.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid grey;
  background: plum;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
}

.box is the whole div include your background. nice and clean. cred by Paulid-d

Page link：https//www.codepudding.com/database/610580.html

Prev:how do i add my prev/next btn to work in my script
Next:Having a difficult time with segmented dropdown buttons
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding