外部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'

と書き込みを作成：HTMLファイル内

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

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

、その後の前に追加します。

あなたはsrc」にファイルに正しいファイルを追加する必要があります'属性'。

出典

2017-04-09 20:09:44

$（ "。モーダル"）は、ファイルが先頭にあるので表示されているものが見つかりません – 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ファイルを使用してモーダルを動作させる方法は？

答えて

関連する問題