出現彈出視窗時如何淡化背景-有解無憂

我的網站上有一個多部分表單，其中包含一些單獨的“資訊彈出視窗”。

在這個精簡的例子中，我只包括了兩個彈出視窗……“隱私政策”彈出視窗和“條款和條件”彈出視窗。

當彈出視窗單獨顯示時，我試圖“模糊”或“淡化”所有內容。

我已經嘗試了一些我在 Internet 上找到的代碼建議，但經過幾天的廣泛實驗和每一個都失敗后，我決定在沒有這些示例的情況下發布我的問題，看看是否有其他人從頭開始有更好的建議。

如果有人可以幫助或指出正確的方向......將不勝感激。

對于冗長的代碼，我提前表示歉意。

謝謝，麥迪遜

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 &#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 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&nbsp;</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 &#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 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 // */

uj5u.com熱心網友回復：

將此類添加到您的 CSS

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

然后用這個替換你的 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" id="bl">
        <div class="formHeader">Fade Test</div>
      </div>


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



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


      <div class="formInfo_Container" id="bl">

        <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" id="bl"><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 &#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 class="userInformation_Container">


        <div class="spacer"></div>


        <div class="left_Wrapper" id="bl">
          <div class="section_Header">Contact Information</div>

        </div>


        <!-- Start userName Field -->

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

        <!-- End userName Field -->


        <!-- Start userEmail Field -->

        <div class="inputField_Wrapper" id="bl"><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" id="bl"><input type="checkbox" id="termsCheckbox" name="termsCheckbox" class="termsCheckbox"
                value="Yes" required><a class="termsText">I Agree to the&nbsp;</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 &#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 class="center_Wrapper" id="bl"><input type="submit" id="submitButton" name="submitButton" class="submit__button"
            value="Submit"></div>

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


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

</body>

</html>

uj5u.com熱心網友回復：

這是

為彈出 div 以外的螢屏設定黑色背景

或者使用 CSS 解決方案更容易... 帶有點擊灰色背景的模態對話框

* {
  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 是整個 div 包括你的背景。漂亮干凈。Paulid-d的信譽

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/534758.html

標籤：javascript网页格式查询CSS弹出

上一篇：jQuery行程動態添加的錨標記不起作用

下一篇：在使用jquery動態輸入和正則運算式匹配時遇到問題。部分有效