如何使用外部js文件工作模態？

我寫了一些JavaScript代碼來顯示頁面加載後的模式，然後單擊按鈕重定向另一個URL。這工作得很好。但現在我需要使用外部JavaScript文件來完成它。提前致謝。這是我做的：如何使用外部js文件工作模態？

 <!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title> Pop Up</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("#myModal").modal('show'); 
     }); 
    </script> 
</head> 
<body> 
<div id="myModal" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
       <h4 class="modal-title">Here is your message Title</h4> 
      </div> 
      <div class="modal-body"> 
       <p>Here is your message details</p> 

        <a href="https://www.fiverr.com/" type="button" class="btn btn-default">Exit</a> 

      </div> 
     </div> 
    </div> 
</div> 
<script> 
    $(".modal").on("hidden.bs.modal", function() { 
     window.location = "https://www.google.com/"; 
    }); 

</script> 
</body> 
</html>

我該如何做到這一點與外部JavaScript文件？

來源

2017-04-09 Tusar Hasan

只是用」的.js'擴展名的新文件。例如：創建 'scripts.js中'

寫：

$(document).ready(function(){ 
    $("#myModal").modal('show'); 
}); 

$(".modal").on("hidden.bs.modal", function() { 
    window.location = "https://www.google.com/"; 
});

，然後在HTML文件前添加：

，你需要正確的文件添加到文件中的「SRC '屬性'。

來源

2017-04-09 20:09:44

$（「。modal」）將不會顯示任何內容，因爲文件在頭部 – charlietfl

將所有內容都複製到<script>標記中，並將其放入外部js文件中。您可以在HTML用以下鏈接這個文件：

<script src="js/YourJSFile.js"></script>

$(document).ready(function(){ 
 
    $("#myModal").modal('show'); 
 

 
    $(".modal").on("hidden.bs.modal", function() { 
 
     window.location = "https://www.google.com/"; 
 
    }); 
 

 
});

 <!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title> Pop Up</title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    
 
    <script src="js/YourJSFile.js"></script> 
 
    
 

 
</head> 
 
<body> 
 
<div id="myModal" class="modal fade"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
 
       <h4 class="modal-title">Here is your message Title</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <p>Here is your message details</p> 
 

 
        <a href="https://www.fiverr.com/" type="button" class="btn btn-default">Exit</a> 
 

 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

來源

2017-04-09 20:08:10 Tony

'$（「模式」）'如圖所示，因爲文件是在頭 – charlietfl

@charlietfl很真實不會找到任何東西。我已經更新了答案。 – Tony

腳本「的js文件」必須在結束標記之前添加

來源

2017-04-09 21:06:14

如何使用外部js文件工作模態？

回答

相關問題