javascript - 用户登陆页面时如何显示弹出窗口 - Javascript

Question

当用户随时登陆时，我正在尝试使用 javascript 在我的页面上显示一个弹出窗口。下面是我的方式，但它在 jquery 中。有没有办法我可以使用 javascript 来实现这一点？

我$('[data-toggle="popover"]').popover('show');认为是jquery。

PS：Jquery 和 Javascript 初学者。

JS

function displayBox() {
    if(var user == 'guest')
    {$('[data-toggle="popover"]').popover('show');}
}

标签： javascriptjquery

Answer 1

您的代码是引导 jQuery。popover 是 bootstrap 库中包含的一个函数。

你可以在纯 JS 中做到这一点

#pop {
  position: absolute;
  top: 100px;
  left: 200px;
  background-color: red;
  height: 200px;
  width: 200px;
}

<div id="pop" >Popping</div>

更有意思的

var user = 'guest';
window.addEventListener("load", function() {
  if (user == 'guest') {
    setTimeout(function() {
      document.getElementById("pop").classList.toggle("hide");
    }, 1000)
    setTimeout(function() {
      document.getElementById("pop").classList.toggle("hide");
    }, 5000)
  }
})

#pop {
  position: absolute;
  top: 100px;
  left: 200px;
  background-color: red;
  height: 200px;
  width: 200px;
  padding-top: 5px;
  text-align: center;
}

.hide {
  display: none
}

.boxshadow {
  -moz-box-shadow: 3px 3px 5px #535353;
  -webkit-box-shadow: 3px 3px 5px #535353;
  box-shadow: 3px 3px 5px #535353;
}

.roundbox {
  -moz-border-radius: 6px 6px 6px 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px 6px 6px 6px;
}

<div id="pop" class="hide boxshadow roundbox">
  <h1>Popping</h1>
</div>