Question

我有一个bootstrap模式如下。我正在使用ng-show来触发模态。当我第一次加载弹出窗口时，当我关闭弹出窗口并重新运行第二次弹出即使x.length为零时弹出也不会出现0

<div class="modal fade in" id="modal" aria-hidden="false" style="display: block;" role="dialog" ng-show="x.length==0" data-toggle="modal" data-target="#modal" >  
                                            <div class="modal-dialog" >

                                      <!-- Modal content-->
                                      <div class="modal-content">

                                        <div class="modal-body" style="background-color: #428bca">
                                          <p ><font color="#FFFFFF">testing</font>
                                           <button type="button" class="btn btn-default" data-dismiss="modal" onclick="$('#modal').remove();">Close</button>
                                        </div>

                                      </div>

                                    </div>
  </div>

Answer 1

您创建模态的方式似乎就是问题所在。如果您按照我在代码段中显示的方式创建模式，它将起作用。数据切换=＆＃34;模态＆＃34;和data-target =＆＃34; #modal＆＃34;需要在触发模态的元素上，并关闭模态，你需要的只是data-dismiss =＆＃34; modal＆＃34;。您可以使用ng-show条件显示或隐藏触发元素。

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.x = [];
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div data-toggle="modal" data-target="#modal" ng-show="x.length==0">Click Here</div> 
  <div class="modal fade in" id="modal" role="dialog">  
    <div class="modal-dialog" >
      <!-- Modal content-->
      <div class="modal-content">
         <div class="modal-body" style="background-color: #428bca">
             <p><font color="#FFFFFF">testing</font></p>
             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

如果你不想在你的HTML中使用触发元素，就像在上面的例子中一样，那么你可以从控制器中使用$（＆＃39; #modal＆＃39;）模态显示模态（＆＃39;显示＆＃39;）并使用$（＆＃39;＃modal＆＃39;）隐藏它.modal（＆＃39; hide＆＃39;）。在这里查看模态选项 - https://v4-alpha.getbootstrap.com/components/modal/#usage

更新：根据评论，以下代码段显示了如何在没有触发按钮的情况下显示/隐藏模态。它使用上面列出的Bootstrap模式选项 -

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.x = [];
    if($scope.x.length === 0){
      $("#modal").modal('show');
    }
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div class="modal fade in" id="modal" role="dialog">  
    <div class="modal-dialog" >
      <!-- Modal content-->
      <div class="modal-content">
         <div class="modal-body" style="background-color: #428bca">
             <p><font color="#FFFFFF">testing</font></p>
             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

我遇到了讨论的相同问题，模态在第一次之后不起作用。仅刷新页面将允许该功能运行一次。就我而言，这是由于js文件在html文件中的引用方式（在@section脚本下）：

我有一个带有事件的按钮，可通过index.js文件弹出模态：

$(function () {
    $("#add-person").on('click', function () {
        $('.modal').modal();
    });
});

我的HTML文件：

<button id="add-person" class="button btn-success">Add People</button>
...
<div  class="modal fade" tabindex="-1" role="dialog">
 ...
</div><!-- /.modal -->
...
@section Scripts {
    <script src="js/index.js"></script>
}

请注意非完全合格 “ js / index.js”参考。当我将其更改为：

“ / js / index.js”即使在第一次之后一切都正常。

这是因为构造用于查找index.js文件的URL只是将js / index.js附加到当前位置（即/home/index/js/index.js），而不是将其重新路由到诸如/ js的根目录/index.js。它在第一次尝试时就起作用了，因为它是从根开始的，因此附加js / index.js指向js文件的准确位置。程序通过模态的第一轮之后，它已经路由到/ home / index，因此附加/ js / index（例如/home/index/js/index.js）没有指向有效路径，因此无法定位js代码启动模式。

当我们第二次加载时，Bootstrap弹出窗口没有显示

2 个答案: