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);
});

});