显示模式弹出窗口 10 秒或直到设置标志或变量

Question

我是jquery的初学者，所以请原谅我的错误。我想显示一个模态弹出窗口 10 秒，或者直到设置了标志或变量，然后隐藏此模态弹出窗口，然后根据标志或变量打开另一个模态弹出窗口。这是我到目前为止所做的代码，

$(document).ready(function() {
$("#btnopen").click(function() {
    $('#myModal1').modal('show');

    setTimeout($('#myModal1').modal('hide'), 10000);  //show myModal1 for 10 seconds
  if({{ flag }}){
    $('#myModal1').modal('hide');
   $('#myModal2').modal('show');  //If flag is set close myModal1 and open myModal2
}
else{
      $('#myModal1').modal('hide');
    $('#myModal3').modal('show');  //else close myModal1 and open myModal3
}
});
$("#btnClose1").click(function() {
  $('#myModal1').modal('hide');
});
$("#btnClose2").click(function() {
  $('#myModal2').modal('hide');
});
$("#btnClose3").click(function() {
  $('#myModal3').modal('hide');
});});

我现在面临的问题是我无法显示 myModal1 10 秒。我搜索了一些文档，但没有解决我的问题。有人可以帮助我吗？.
编辑
如果我希望仅在设置标志后关闭 myModal1 弹出窗口，否则，30 秒后关闭 myModal1 弹出窗口并打开 myModal3 弹出窗口，我该怎么办？ 预先感谢。

Answer 1

尝试一下代码，这可能对你有帮助

var myVar;
    $(document).ready(function () {
      $("#btnopen").click(function () {
        $('#myModal1').modal('show');

        myVar=setTimeout(function(){
    $('#myModal1').modal('hide');

    if (flag){
        $('#myModal1').modal('hide');
        $('#myModal2').modal('show');  //If flag is set close myModal1 and open myModal2
      }
    else{
        $('#myModal1').modal('hide');
        $('#myModal3').modal('show');  //else close myModal1 and open myModal3
      }
        }, 10000);  //show myModal1 for 10 seconds

    });


    $("#btnClose1").click(function () {
      $('#myModal1').modal('hide');
clearTimeout(myVar);
    });
    $("#btnClose2").click(function () {
      $('#myModal2').modal('hide');
clearTimeout(myVar);
    });
    $("#btnClose3").click(function () {
      $('#myModal3').modal('hide');
clearTimeout(myVar);
    });

    });

不要将以下代码放在 setTimeout(function(){},10000); 之后 因为下面的代码将在 setTimeout(function(){},10000); 之后执行；并且不会等待 10 秒。这是一个异步执行，将在 10 秒后回调

if({{ flag }}){
    $('#myModal1').modal('hide');
   $('#myModal2').modal('show');  //If flag is set close myModal1 and open myModal2
}

Answer 2

您的 setTimeout() 语法不正确。您需要将代码包装到一个函数中，该函数将在时间到期后运行。

注意：我认为您正在获取

flag

的值...我现在已将标志值设置为1

var flag = 1;
$("#btnopen").click(function() {
  $('#myModal1').modal('show');
  setTimeout(function() {
    $('#myModal1').modal('hide');
    if (flag) {
      $('#myModal2').modal('show');
    } else {
      $('#myModal3').modal('show')
    }
  }, 5000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" id="btnopen">
  Launch demo modal
</button>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal1</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal2</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal3</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    </div>
  </div>
</div>

Answer 3

function displayFlags() {
    const flags = document.querySelectorAll('.flag');
    flags.forEach((flag) => {
        const randomX = Math.random() * window.innerWidth;
        const randomY = Math.random() * window.innerHeight;
        flag.style.left = randomX + "px";
        flag.style.top = randomY + "px";
        animateFlag(flag);
    });
}

function animateFlag(flag) {
    const duration = 1000;
    const startY = parseFloat(flag.style.top);
    const endY = -flag.offsetHeight;
    const startTime = performance.now();

    function step(currentTime) {
        const elapsedTime = currentTime - startTime;
        const progress = Math.min(elapsedTime / duration, 1);
        const newY = startY + (endY - startY) * progress;

        flag.style.top = newY + "px";

        if (progress < 1) {
            requestAnimationFrame(step);
        }
    }

    requestAnimationFrame(step);
}