Question

没有弹出我的引导模态。我知道这很简单，只是不把手指放在上面。我的代码：

    <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 -->

Answer 1

您可以使用Jquery打开Bootstrap模式（#criteria按钮）单击

eat(Object plant)

}）

Answer 2

<!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>

它适合你。可能是你的图书馆包含不合适

Answer 3

我检查了你的代码。它看起来很好并在JSfiddle上测试它（它的工作原理）。好像你没有包含bootstrap的js或Jquery lib。因此，请确保按正确顺序包含所有必需的库。您可以使用以下代码，也可以下载文件然后包含它们。

    <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>

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

https://jquery.com/download/

此外，您不需要绑定点击功能来打开模态框。因为你已经有了代码。所以它将调用模态框并打开它。 <a href="#criteriaModal" data-toggle="modal"> <span style="color: #afabab;" class="glyphicon glyphicon-question-sign"> </span></a></label>

好运

引导模式使用问题

3 个答案: