ブートストラップモーダルの使用に関する問題

ブートストラップモーダルがポップアップされない。私はそれが私の指を置いていない、単純なものであることを知っています。私のコード：ブートストラップモーダルの使用に関する問題

<div class="form-group"> 
     <label class="control-label" for="criteria" style="font-size: 14px;">Criteria: <a href="#criteriaModal" data-toggle="modal"><span style="color: #afabab;" class="glyphicon glyphicon-question-sign"></span></a></label> 
     <input type="text" class="form-control" id="criteria" ng-model="criteria" style="font-size: 14px;" placeholder="(e.g. more than 80%)"> 
    </div> 

<!-- criteriaModal --> 
<div class="modal fade" id="criteriaModal" tabindex="-1" role="dialog" aria-labelledby="criteriaModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-body"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
        &times; 
       </button> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat odio vel fermentum faucibus. Phasellus vestibulum, justo sed vestibulum bibendum, risus mauris congue nisi, et iaculis ipsum nisl a turpis. Vivamus et purus diam. Proin sagittis nisl eu porttitor posuere. Phasellus feugiat nec elit et hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit a quam eget malesuada. Cras lobortis augue nibh, a feugiat justo consequat ac. In sit amet pulvinar massa. In maximus, justo eget elementum laoreet, lacus nunc molestie lectus, at congue neque nisl quis est. Nam non laoreet mauris. Phasellus non ullamcorper libero. Duis dapibus ornare arcu in fringilla. Curabitur molestie ex eu nunc ultricies, id pharetra nisl semper.</p> 
      </div> 
      <div class="modal-footer"> 
       <input type="button" class="naviaBtn naviaBlue" data-dismiss="modal" value="okay"> 
      </div> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 
<!-- /.modal -->

出典

2016-08-10 Mark

_Notは私のブートストラップモーダルがup_を意味ポップには何を得るのでしょうか？彼らはまったく働いていないか、働いているように働いていませんか？それらがまったくコンソールにエラーをチェックしていない場合、** jQuery **と** BootstrapJS **が使用中であることを確認してください。 – vanburen

あなたは（#criteriaボタン）でjQueryを使ってブートストラップモーダルを開くことができますそれはあなたのために動作します

$("#criteria").click(function(e){ 

$("#criteriaModal").modal("show")

}）

出典

2016-08-10 02:49:19

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 
    <h2>Modal Example</h2> 

    <div class="form-group"> 
     <label class="control-label" for="criteria" style="font-size: 14px;">Criteria: <a href="#criteriaModal" data-toggle="modal"><span style="color: #afabab;" class="glyphicon glyphicon-question-sign"></span></a></label> 
     <input type="text" class="form-control" id="criteria" ng-model="criteria" style="font-size: 14px;" placeholder="(e.g. more than 80%)"> 
    </div> 

<!-- criteriaModal --> 
<div class="modal fade" id="criteriaModal" tabindex="-1" role="dialog" aria-labelledby="criteriaModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-body"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
        &times; 
       </button> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat odio vel fermentum faucibus. Phasellus vestibulum, justo sed vestibulum bibendum, risus mauris congue nisi, et iaculis ipsum nisl a turpis. Vivamus et purus diam. Proin sagittis nisl eu porttitor posuere. Phasellus feugiat nec elit et hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit a quam eget malesuada. Cras lobortis augue nibh, a feugiat justo consequat ac. In sit amet pulvinar massa. In maximus, justo eget elementum laoreet, lacus nunc molestie lectus, at congue neque nisl quis est. Nam non laoreet mauris. Phasellus non ullamcorper libero. Duis dapibus ornare arcu in fringilla. Curabitur molestie ex eu nunc ultricies, id pharetra nisl semper.</p> 
      </div> 
      <div class="modal-footer"> 
       <input type="button" class="naviaBtn naviaBlue" data-dismiss="modal" value="okay"> 
      </div> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 
<!-- /.modal --> 
</div> 
</div> 
</body> 
</html>

をクリックします。 uライブラリの組み込みが正しくない可能性があります

出典

2016-08-10 05:43:34 mean

あなたのコードを確認しました。それは正常に見え、JSfiddle（それは動作する）でそれをテストしました。ブートストラップのjsやJqueryのlibを含めなかったようです。したがって、すべての必要なライブラリが正しい順序で含まれていることを確認してください。次のコードを使用するか、またはファイルをダウンロードしてそれらを含めることができます。

https://jquery.com/download/

https://getbootstrap.com/getting-started/

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

はまた、あなたがモーダルボックスを開くための関数をクリックしてバインドする必要はありません。あなたは既にコードを持っているからです。モーダルボックスを呼び出して開きます。

<a href="#criteriaModal" data-toggle="modal"> <span style="color: #afabab;" class="glyphicon glyphicon-question-sign"> </span></a></label>

GOOD LUCK

出典

2016-08-10 09:20:28

ブートストラップモーダルの使用に関する問題

答えて

関連する問題