具有Bootstrap模式的setTimeout在超时后不显示

Question

我试图延迟显示一个Bootstrap模态，直到5秒钟过去。 这是我的代码部分。 它似乎是从我在MDN上阅读的内容写的。 模态在任何时间后都不会出现。 任何帮助，将不胜感激。

var timeout;
  function modalAlert(message){
        $("#myModalLabel").text("Hey Look!")
        $('.modal-body').html("<img src='"+message+"'>");
        timeout = window.setTimeout(showModal,5000);

  }
  function showModal(){
    console.log("HERE")
    $("#myModal").modal('show')
  }

Vijay Ramamurthy帮我找到了解决方案：

var timeout;
  function modalAlert(message){
        $("#myModalLabel").text("Hey Look!")
        $('.modal-body').html("<img src='"+message+"'>");
        window.setTimeout(function(){showModal();},5000);

  }
  function showModal(){
    console.log("HERE")
    $("#myModal").modal('show')
  }

Answer 1

使用“shown”事件处理程序在模态上注册超时，然后隐藏它。 您可以将函数链接在一起，因为它是一个jQuery插件。

$("#myModal").modal("show").on("shown", function () {
    window.setTimeout(function () {
        $("#myModal").modal("hide");
    }, 5000);
});

Answer 2

尝试在modalAlert函数中创建最后一行

timeout = window.setTimeout(function () {showModal();}, 5000);