logo标签列表

点击按钮后关闭模态窗口。

javascriptangularjsnode.jsbootstrap-modal
3

我希望在点击“是”按钮后，模态框能够关闭，但现在它只运行了ng-click=""函数。如何在点击“是”按钮后关闭模态框？

<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">Confirmation!</h4>
      </div>
      <div class="modal-body">
        Do you want to send SMS?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
        <button type="button" class="btn btn-primary" ng-click="smsAll()">Yes</button>
      </div>
    </div>
  </div>
</div>
请查看这个链接。 - Yin Gang
这个模态框的控制器在哪里？你在哪里定义了smsAll函数？ - Nikhilesh K V
3个回答
6
尝试在smsAll方法中使用以下代码：
```` // 在这里添加您的代码 ````
$('#myModal').modal('hide');

这个事件由Bootstrap提供，用于手动隐藏模态框。

假设我在单击“是”时关闭模态框，并且当用户再次访问此页面时不希望再次出现。我该如何做到这一点？我如何使用标志来控制它？ - Megh
2

我已经创建了一个示例代码，希望这能帮到你。

 $('#myModal').modal();
 var app = angular.module('myApp', []);
 app.controller('ModalCtrl', function($scope) {

   $scope.smsAll = function() {
     alert('do your stuff');
     $('#myModal').modal('hide')
   }
 });
<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

</head>

<body>

  <div class="container-fluid" ng-app="myApp">

    <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">Confirmation!</h4>
          </div>
          <div class="modal-body">
            Do you want to send SMS?
          </div>
          <div class="modal-footer" ng-controller="ModalCtrl">
            <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            <button type="button" class="btn btn-primary" ng-click="smsAll()">Yes</button>
          </div>
        </div>
      </div>
    </div>

  </div>



</body>

</html>

0

试试这段代码

我添加了新的属性[data-modal-action="close"]。根据点击事件，它将自动关闭模态框。

HTML

 <button type="button" class="btn btn-primary" data-modal-action="close" ng-click="smsAll()">Yes</button>

脚本

$("[data-modal-action=close]").click(function () {
        $("#myModal").modal("hide");
    });
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接