javascript function 声明后引导模式不起作用

Question

我正在做一个简单的项目，我想自动向用户显示指令，为此我创建了一个引导模式，它工作正常。 忽略说明

  <div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">How to Play?</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        1. This game is created for fun ,play it with your friend or enemy or whomever you want <br>
        2.Basically this game is for my resume sake..but i don't mind if you play it <img src="https://awesomeopensource.com/favicon.ico" alt="" height="20px" width="20px"><br>
        3.So, there is red green blue colors given in some proportion out of 255 in the format rgb(red,green,blue)
       <br> 
       3. You have to guess the color which is obtained by mixing above proportianate colors 
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
       </div>
    </div>
  </div>
</div>

但是我试图在用户打开网站时显示模态，所以我写了一个简单的 javascript function 来显示和隐藏模态，使用 setTimeOut function

  $(document).ready(function(){
setTimeout(function(){
$('#modal1').modal("show");
setTimeout(function(){
$('#modal1').modal("hide");
},10000);
},3000);
});

模态自动关闭后，当我单击模态页脚上的按钮时，就会出现问题。 它不工作。 你可以在这里检查代码的功能这里是网站

Answer 1

您没有将模态的 id 与“单击以获取说明”按钮很好地绑定。

使用exampleModalCenter更改数据目标值中的modal1 。

所以，你应该有：

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal1">
Click For Instructions
</button>

Answer 2

通过检查您在 git 项目上应用的代码，

你在那里犯了一个小错误，

要启动 BS 模态，它需要 2 个属性子按钮：

1. 数据目标
2. 数据切换

在 data-target 中，您需要将模态的 ID 设为 paas，在您的 id 错误的情况下，您可以尝试其中一个更改data-target="#modal1"

或者

模态的 id 到id="exampleModalCenterTitle"

这就是你需要做的。

Answer 3

问题出在你的按钮上

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModalCenter">
    Click For Instructions
  </button>

使用您的模式 id '#modal1' 更改目标属性值

你也可以使用下面的js

$(document).ready(function(){

setTimeout(function(){
    $('#modal1').modal("show");
},3000);

$('#modal1').on('shown.bs.modal', function () {
    setTimeout(function(){
        $('#modal1').modal("hide");
    },1000);
});

});