Toastr 多个 div

Question

我有多个 div 包含自定义 css toastr 通知，我需要帮助的是每次页面加载时显示随机 div 或通过代码使用 toastr 如何以相同的方式进行操作，任何帮助都将受到赞赏 css 或 js，这就是我一直以来的经历尝试但没有运气，我也尝试过使用 math() 但它要么同时显示所有 div 或什至不工作......无论如何它可以 select 具体div 并只显示他而隐藏那里的其他 div？

#toastr {
  font-size: 21px;
  text-align: center;
  transition: opacity 1s 1s;
  position: fixed;
  z-index: 999999;
  pointer-events: none;
  z-index: 1;
  bottom: 12px;
  left: 12px;
  font-size: 17px;
  animation: fadeins 5s linear forwards;
  opacity: 0;
}

#toastr a {
  color: white;
  text-decoration: none;
}

#toastr>div {
  position: relative;
  pointer-events: auto;
  overflow: hidden;
  margin: 0 0 6px;
  padding: 15px 15px 15px 15px;
  width: 300px;
  border-radius: 3px 3px 3px 3px;
  background-position: 15px center;
  background-repeat: no-repeat;
  box-shadow: 0 0 12px #999999;
  color: #FFFFFF;
  opacity: 1;
}

.toastr-success {
  background-color: #51A351;
}

@keyframes fadeins {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    opacity: 0;
    bottom: -5px;
  }
  to {
    opacity: 1;
    bottom: 12px;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
    bottom: 12px;
  }
  to {
    opacity: 0;
    bottom: 0;
  }
}

<div class="views-row views-row-2 views-row-even random-popup">
  <div class="views-field views-field-nothing">
    <span class="field-content">
      <div id="toastr" class="toastr">
        <div class="toast toastr-success" aria-live="polite">
          <div class="toast-message"><a href="#">message1</a>.</div>
        </div>
      </div>
    </span>
  </div>
</div>
<div class="views-row views-row-3 views-row-even random-popup">
  <div class="views-field views-field-nothing">
    <span class="field-content">
      <div id="toastr" class="toastr">
        <div class="toast toastr-success" aria-live="polite">
          <div class="toast-message"><a href="#">message2</a>.</div>
        </div>
      </div>
    </span>
  </div>
</div>

Answer 1

看到你有一个叫做random-popup的class，你可以将它们设置为初始显示none，然后使用另一个class可能被称为活动，设置要阻止的显示..

.random-popup {
  display: none;
}
.random-popup.active {
  display: block;
}

然后使用一些简单的 Javascript 通过添加活动 class..

来设置其中一个随机可见

var popups = document.querySelectorAll(".random-popup");
popups[Math.trunc(Math.random() * popups.length)].classList.add("active");

例如..

var popups = document.querySelectorAll(".random-popup");

popups[Math.trunc(Math.random() * popups.length)]
  .classList.add("active");

#toastr {
  font-size: 21px;
  text-align: center;
  transition: opacity 1s 1s;
  position: fixed;
  z-index: 999999;
  pointer-events: none;
  z-index: 1;
  bottom: 12px;
  left: 12px;
  font-size: 17px;
  animation: fadeins 5s linear forwards;
  opacity: 0;
}

#toastr a {
  color: white;
  text-decoration: none;
}

#toastr>div {
  position: relative;
  pointer-events: auto;
  overflow: hidden;
  margin: 0 0 6px;
  padding: 15px 15px 15px 15px;
  width: 300px;
  border-radius: 3px 3px 3px 3px;
  background-position: 15px center;
  background-repeat: no-repeat;
  box-shadow: 0 0 12px #999999;
  color: #FFFFFF;
  opacity: 1;
}

.toastr-success {
  background-color: #51A351;
}

@keyframes fadeins {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    opacity: 0;
    bottom: -5px;
  }
  to {
    opacity: 1;
    bottom: 12px;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
    bottom: 12px;
  }
  to {
    opacity: 0;
    bottom: 0;
  }
}

.random-popup {
  display: none;
}

.random-popup.active {
  display: block;
}

<div class="views-row views-row-2 views-row-even random-popup">
  <div class="views-field views-field-nothing">
    <span class="field-content">
      <div id="toastr" class="toastr">
        <div class="toast toastr-success" aria-live="polite">
          <div class="toast-message"><a href="#">message1</a>.</div>
        </div>
      </div>
    </span>
  </div>
</div>
<div class="views-row views-row-3 views-row-even random-popup">
  <div class="views-field views-field-nothing">
    <span class="field-content">
      <div id="toastr" class="toastr">
        <div class="toast toastr-success" aria-live="polite">
          <div class="toast-message"><a href="#">message2</a>.</div>
        </div>
      </div>
    </span>
  </div>
</div>

Toastr 多个 div

Toastr multiple divs

html

javascript

css

toastr