Question

我在页面上正确显示模态时没有问题，而且页面内容没有重叠。我尝试了几次调整，但没有运气。请帮助我。谢谢

您可以尝试使用Chrome或Mozilla浏览器在实时网站上查看此内容。

＆＃13;

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container">
<div class="w3-container">
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Read More...</button>

  <div id="id01" class="w3-modal">
    <div class="w3-modal-content">
      <header class="w3-container w3-teal"> 
        <span onclick="document.getElementById('id01').style.display='none'" 
        class="w3-button w3-display-topright">&times;</span>
        <h3>MESSAGE </h3>
      </header>
      <div class="w3-container">
-
      </div>
      <footer class="w3-container w3-teal">
        <p>MESSAGE</p>
      </footer>
    </div>
  </div>
</div>
                </div>
              </div>
              
              
              <div class="col-md-4 wow fadeInUp" data-wow-delay="0.5s">
                <div class="box-service">
                  <div class="ic-service text-center">
                    <i class="ti-comment-alt"></i>
                  </div>
                  <h3 class="text-uppercase color-dark title-service text-center">Summary</h3>
                  <p>➢	40% in local currency (Naira) per month.<br> 
➢	60% in bit coin per month. <br>
➢	10% constant referral bonus from all direct down lines.<br>
</p>
                  
                    <button onclick="document.getElementById('id02').style.display='block'" class="w3-button w3-black">Read More...</button>

  <div id="id02" class="w3-modal">
    <div class="w3-modal-content">
      <header class="w3-container w3-teal"> 
        <span onclick="document.getElementById('id02').style.display='none'" 
        class="w3-button w3-display-topright">&times;</span>
        <h3>SUMMARY</h3>
      </header>
      <div class="w3-container">
        <p>➢	40% in local currency (Naira) per month.<br>
➢	60% in bit coin per month. <br>
➢	10% constant referral bonus from all direct down lines.<br>
➢	“Alert FBI Icon” conditions: Raise “Alert FBI” only when there is fake POP. Abuse of this will lead to account blocking permanently.<br>
➢	First time registration bonus once:<br>
N10k	-	N99k gives bonus of N6k or $20<br>
N100k	-	N499k gives bonus of N20k or $50<br>
N500k	-	N1M	 gives bonus of N50k or $150<br>
➢	Minimum PH of N10k<br>
➢	Once PH there is an instant matching to pay 10% of your total amount PH as a commitment.<br> The remaining 90% will be matched at least 20 days later.

</p>
      </div>
      <footer class="w3-container w3-teal">
        <p>SUMMARY</p>
      </footer>
    </div>
  </div>
</div>
                  
              </div>
              <div class="col-md-4 wow fadeInUp" data-wow-delay="1s">
                <div class="box-service">
                  <div class="ic-service text-center">
                    <i class="ti-gift"></i>
                  </div>
                  <h4 class="text-uppercase color-dark title-service text-center">Additional Benefits</h4>
                  <p>1.	Free ticket worth N600k to South Africa for all active members with 100 direct down lines and have PH minimum amount of N500k or $1500 for 4 months.</p>
                   <button onclick="document.getElementById('id03').style.display='block'" class="w3-button w3-black">Read More...</button>

  <div id="id03" class="w3-modal">
    <div class="w3-modal-content">
      <header class="w3-container w3-teal"> 
        <span onclick="document.getElementById('id03').style.display='none'" 
        class="w3-button w3-display-topright">&times;</span>
        <h3>ADDITIONAL BENEFITS</h3>
      </header>
      <div class="w3-container">
        <p>1.	Free ticket worth N600k to South Africa for all active members with 100 direct down lines and have PH minimum amount of N500k or $1500 for 4 months.<br>
2.	 Free N150k will be given to  active members who have participated for 6 months after registration, and the money is for:<br>
•	Skills acquisition program.<br>
•	Business as an entrepreneur.<br>
•	School fee regarded as scholarship.<br>
No condition on amount PH in No.2<br>
3.	An active member within the first 4 months of registration with minimum PH of N500k or $1500 in bit coins in each month is qualified to get a loan of N2M and will be paid back for the next 6 months.<br>
Condition:  All of these will be in batches such as: batch A, B, C, D, E, F etc.  
</p>
      </div>
      <footer class="w3-container w3-teal">
        <p>ADDITIONAL BENEFITS</p>
      </footer>
    </div>
  </div>
                </div>
              </div>
            </div>

＆＃13;

Answer 1

您已将模态的html放入相同的div中，以打开该模式。我建议将所有模态弹出式DIV保存在一个单独的div中，并在关闭body标签之前将其放在页面底部。

像

<div>
    <div id="id01" class="w3-modal">
    .....
    </div>
    <div id="id02" class="w3-modal">
    .....
    </div>
    <div id="id03" class="w3-modal">
     .....
    </div>
</div>

Answer 2

您的导航栏的z-index为1000，因此您需要确保您的模态高于该值。
你的模态与身体内的其他div处于同一水平，深入体内。你需要把它们移出来作为<body>元素的直接孩子，正如Ankush的答案所述。

一旦这样做，您将获得所需的效果。

HTML：

<body>
    <div class="w3-modal"></div> // <--- Direct child of body
</body>

CSS：

.w3-modal {
    z-index: 1001; // <--- At least 1001, navbar z-index is 1000.
}

在页面内容上重叠的模态

2 个答案: