时间戳

首页 > 解决方案 > 创建弹出过渡 Jquery

javascript - 创建弹出过渡 Jquery

问题描述

我想使用 jquery 创建自定义转换弹出窗口，例如：http : //d1.internetbusinesshub.com/popup.html。

这是一个基本的弹出窗口，会在屏幕上不断出现和消失。

上面的弹出窗口是使用 jqueryMobile 创建的。我只想使用简单的 jquery 来达到预期的结果。

尝试使用 jQuery 和 CSS 进行转换，但没有成功。

以下是我的代码：

var i = 0;
$(document).ready(function() {
  $("#popup_div").fadeIn();
  setInterval('autoRefreshPopup()', 4000);
});

function autoRefreshPopup() {
  i++;
  if (i > 20) {
    i = 1;
  }
  refreshContent(i);
  var $element = $('#popup_div');

  $("#popup_div").fadeIn();
  setTimeout(function() {
    $("#popup_div").fadeOut();
  }, 3000);
}

function refreshContent(i) {
  var msg = '';
  switch (i) {
    case 1:
      msg = "text1";
      break;
    case 1:
      msg = "text12";
      break;
    case 2:
      msg = "text13";
      break;
    case 3:
      msg = "text14";
      break;
      msg = "text";
  }
  $('#popup_content').html(msg);
}
#popup_div {
  background: #00a8a9 !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-family: Verdana !important;
  font-weight: bold;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  position: fixed;
  width: 20%;
  border-radius: 5px;
}

#popup_content {
  padding: 5px 5px 5px 5px;
  text-align: center;
}
<head>
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>

<body>
  <p id="p_head">This is a paragraph. This text has no alignment specified.</p>

  <div align="center" style="border:1px solid red; height:800px;">
    This is some text in a div element!
  </div>

  <p>This is a paragraph. This text has no alignment specified.</p>

  <div id="popup_div">
    <p id="popup_content">text1</p>
  </div>
</body>

标签： javascriptjqueryhtmlcsstransition

解决方案

推荐阅读