Открыть модал при загрузке страницы без кнопки - PullRequest
Новая
       15

Открыть модал при загрузке страницы без кнопки

0 голосов
/ 02 июля 2019

У меня есть простой модал, который открывается нажатием кнопки. Как сделать так, чтобы он открывался при загрузке страницы, чтобы я мог сбросить все кнопки вместе? Мне нужно изменить приведенную ниже функцию, но не уверен, как. 

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); 
}

Любая помощь приветствуется.

Ответы [ 3 ]

1 голос
/ 02 июля 2019

Просто удалите 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>
0 голосов
/ 02 июля 2019

Если у вас есть причина, по которой он должен отображаться: ни с одной для начала (я не могу представить причину, по которой вы это сделали), просто добавьте: 

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

С другой стороны, открытая модальная веб-страница - это довольно хороший способ раздражать людей до такой степени, что они быстро выходят из вашего сайта.

0 голосов
/ 02 июля 2019

Вы можете попробовать это также 

<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файл.

спасибо

...