ブートストラップ - テストjqueryモーダル

-1

私はブートストラップフレームワーク、特にjqueryはモーダル画面を表示しようとしていますが、動作しません。ブートストラップ - テストjqueryモーダル

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<title>AddCloud - Edicions</title> 
</head> 

<body> 
     <div class="modal-body"> 
      <table id="table_search" class="table table-hover"> 
       <thead> 
        <tr> 
         <td>CCA</td> 
         <td>Name</td> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td>1</td> 
         <td>2</td> 
         <td>3</td> 
        </tr> 
        <tr> 
         <td>a</td> 
         <td>b</td> 
         <td>c</td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 

     <script> 
      $('#table_search > tbody').on('click', '>tr', function() { 
       alert($(this).text()); 
      }); 


      $('#table_search > tbody > tr').dblclick(function() { 
       alert($(this).text()); 
      }); 
     </script> 

     <script src="assets/jquery/jquery.min.js"></script> 
</body> 
</html>

コードは非常に簡単です、それが動作しない理由を、私は理解していない:(

を、それは問題がファイルであることは可能ですjqueryのが含まれているか、私は知りません。

よろしく、

出典

2016-09-12 ruzD

コンソールには何が表示されますか？ブートストラップはどこに入れますか？ – depperm

[これらの]（http://getbootstrap.com/javascript/#modals）の例を見てください。モーダルが機能するために必要なコードの半分以上が欠落しています。ブートストラップ自体とhtmlコンテナを含む。 – empiric

あなたの答えをありがとう。私は例を見るつもりです。 – ruzD

を含める：あなたのヘッダーで

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

を - あなたは、実際にブーツを追加していません文書にトラップします。

また、これらの3つのリンクのすべての上記のあなたのヘッダに

<script src="assets/jquery/jquery.min.js"></script>

を移動します。これは最初にブートストラップで使用するためにロードする必要があります。あなたはこのすべてコピーする場合

：あなたの.htmlファイルに

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.js"></script> 

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

<title>AddCloud - Edicions</title> 
</head> 

<body> 
    <div class="container"> 

    <!-- Button trigger modal --> 
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
     Launch demo modal 
    </button> 

    <!-- Modal --> 
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
     <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 

      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
      </div> 

      <div class="modal-body"> 
       <table id="table_search" class="table table-hover"> 
        <thead> 
         <tr> 
          <td>CCA</td> 
          <td>Name</td> 
         </tr> 
        </thead> 
        <tbody> 
         <tr> 
          <td>1</td> 
          <td>2</td> 
          <td>3</td> 
         </tr> 
         <tr> 
          <td>a</td> 
          <td>b</td> 
          <td>c</td> 
         </tr> 


     </tbody> 
      </table> 
     </div> 

     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 

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

<script> 
    $('#table_search > tbody').on('click', '>tr', function() { 
     alert($(this).text()); 
    }); 


    $('#table_search > tbody > tr').dblclick(function() { 
     alert($(this).text()); 
    }); 
</script>

、それが動作します。

出典

2016-09-12 15:49:19 JCollerton

ありがとうございました！すでに私は、問題を参照してください！ – ruzD

ブートストラップ - テストjqueryモーダル

答えて

関連する問題