Question

所以我在bootstrap中完成了我的网站。但现在我正在尝试添加一个底部弹出窗口，在页面加载后弹出屏幕，或者在访问者向下滚动一点之后。我希望它（几乎）与https://themes.getbootstrap.com/完全一样。

我已经尝试从bootsnipp和这里找出几个例子，但是无法获得任何工作。可能是因为我有0次Javascript / jQuery经验（现在甚至确定在哪里放jQuery代码），或者我做错了什么。有人可能会让我在正确的轨道上创建类似的弹出窗口吗？

Answer 1

在页面加载后使用$(document).ready(function(){ /*Your code*/ });执行某些操作：

＆＃13;

$(document).ready(function() {
  setTimeout(function() {
    $('.popup').toggleClass('shown');
  }, 0);
  setTimeout(function() {
    $('.popup').toggleClass('shown');
  }, 4000);
});

＆＃13;

* {
  font-family: Open Sans;
}

.popup {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background-color: lightgreen;
  border: 5px solid goldenrod;
  position: fixed;
  padding: 10px;
  height: 100px;
  width: 200px;
  bottom: -200px;
  transition: bottom 1s;
  right: 0;
}

.popup.shown {
  bottom: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup">
  <span>I'm a popup</span>
</div>

＆＃13;

或使用keyframes创建不带js的弹出窗口：

＆＃13;

* {
  font-family: Open Sans;
}

.popup {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background-color: lightgreen;
  border: 5px solid goldenrod;
  position: fixed;
  padding: 10px;
  height: 100px;
  width: 200px;
  bottom: -200px;
  right: 0;
  animation: popup 5s;
}

@keyframes popup {
  0% {bottom: -200px;}
  20% {bottom: 0;}
  80% {bottom: 0;} 
  100% {bottom: -200px;}
}

＆＃13;

<div class="popup">
  <span>I'm a popup</span>
</div>

＆＃13;

负载底部弹出窗口

1 个答案: