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 class="pageContainer">
<div class="blankSpace"></div>
<!-- // START FORM CONTAINER // -->
<div class="formContainer">
<!-- // START HEADER // -->
<div class="center_Wrapper"><div class="formHeader">Fade Test</div></div>
<!-- // END HEADER // -->
<!-- // START FORM INFORMATION // -->
<div class="formInfo_Container">
<div class=""><p class="formInstructions">
Please fill out the form below.<br><br>
</p></div>
</div>
<!-- // END FORM INFORMATION // -->
<!-- // START PRIVACY POLICY // -->
<div class="privacy_Container">
<div class="privacyPopup">
<div class="privacyWrap"><a class="privacyLink" onclick="privacyFunction()">Privacy Policy</a>
</div>
<p class="privacyPopup_text" 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 class="privacyPopup_close" onclick="privacyFunction()">Close ⌧</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 class="userInformation_Container">
<div class="spacer"></div>
<div class="left_Wrapper"><div class="section_Header">Contact Information</div>
</div>
<!-- Start userName Field -->
<div class="inputField_Wrapper"><input type="text" id="userName" name="userName"
class="inputField" placeholder=" Your Name" required></div>
<!-- End userName Field -->
<!-- Start userEmail Field -->
<div class="inputField_Wrapper"><input type="email" id="userEmail" name="userEmail"
class="inputField" placeholder=" [email protected]" required></div>
<!-- End userEmail Field -->
<!-- // END USER INFORMATION // -->
<!-- // START TERMS & CONDITIONS // -->
<div class="terms_Container">
<div class="spacer"></div>
<div class="spacer"></div>
<div class="termsPopup">
<div class="termsWrap"><input type="checkbox" id="termsCheckbox" name="termsCheckbox"
class="termsCheckbox" value="Yes" required><a class="termsText">I Agree to the </a><a
class="termsLink" onclick="termsFunction()">Terms and Conditions</a></div>
<p class="termsPopup_text" 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 class="termsPopup_close" onclick="termsFunction()">Close ⌧</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 class="center_Wrapper"><input type="submit" id="submitButton" name="submitButton"
class="submit__button" 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 // */
2
Answers
Add this class to your CSS
then replace your HTML with this and you are done.
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
.box is the whole div include your background. nice and clean.
cred by Paulid-d