Question

我有一个简单的模式，可通过单击按钮打开。如何在页面加载时使其打开，以便我可以一起放弃按钮？我需要更改以下功能，但不确定如何操作。

var modal = document.getElementById("promoModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("promo-close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

和html

<button id="myBtn">Open Modal</button>

<div id="promoModal" class="promomodal">    
  <div class="promo-modal-content">
    <span class="promo-close">&times;</span>
   CONTENT GOES HERE
  </div>

</div>

这是CSS

.promomodal {
  display: none; 
  position: fixed;
  z-index: 1; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.7); 
}

任何帮助表示赞赏。

Answer 1

只需从元素的初始样式中删除display:none：

var modal = document.getElementById("promoModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("promo-close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

.promomodal {
  position: fixed;
  z-index: 1; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.7); 
}

<button id="myBtn">Open Modal</button>

<div id="promoModal" class="promomodal">    
  <div class="promo-modal-content">
    <span class="promo-close">&times;</span>
   CONTENT GOES HERE
  </div>

</div>

Answer 2

您也可以尝试这个

<div class="promomodal-demo">
    <div id="list-builder"></div>
    <div id="promoModal" class="promomodal">    
      <div class="promo-modal-content">
        <span class="promo-close">&times;</span>
       CONTENT GOES HERE
      </div>
    </div>
</div>

CSS：

body {
    position: relative;
}
#list-builder {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #333;
    filter: alpha(opacity=80);
    opacity: 0.8;
    display: none;
}
#promoModal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #79C4F8;
    color: #FFFFFF;
    width: 90%;
    max-width: 600px;
    padding: 30px;
    border: 10px solid #FFFFFF;
    display: none;
    z-index: 99;
}
.promo-close{
    cursor: pointer;
}

js：

var delay = 100; // milliseconds
        var cookie_expire = 0; // days
        var cookie = localStorage.getItem("list-builder");

        if(cookie == undefined || cookie == null) {
          cookie = 0;
        }
        if(((new Date()).getTime() - cookie) / (1000 * 60 * 60 * 24) > cookie_expire) {
            $("#list-builder").delay(delay).fadeIn("slow", () => {
                $("#promoModal").fadeIn("slow", () => {});
            });
            $(".promo-close").click(() => {
                $("#list-builder, #promoModal").hide();
                localStorage.setItem("list-builder", (new Date()).getTime());
            });
        }

**注意：**需要调用jquery文件。

谢谢

Answer 3

如果您有理由将其设置为显示：一开始就没有（我想不出为什么），只需添加：

  window.onload = function() {
     document.getElementById("promoModal").style.display = "block";
 }

另一方面，打开带有模式的网页是使人们烦恼到快速退出网站的一种很好的方法。

页面加载时打开模式，不带按钮

3 个答案: