admin管理员组

文章数量:1278654

I want the modal to close after i click on the yes button but now, it only runs the ng-click="" function. How can I close the modal after I click on the yes button?

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

I want the modal to close after i click on the yes button but now, it only runs the ng-click="" function. How can I close the modal after I click on the yes button?

<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>
  • javascript
  • angularjs
  • node.js
  • bootstrap-modal
Share Improve this question asked May 24, 2016 at 5:56 sxxxxxxxsxxxxxxx 5852 gold badges7 silver badges17 bronze badges 2
  • Check this plz. – Yin Gang Commented May 24, 2016 at 6:02
  • where is the controller for this modal where you have defined smsAll function ? – Nikhilesh K V Commented May 24, 2016 at 6:06
Add a ment  | 

3 Answers 3

Reset to default 6

Try this code inside you smsAll method:

$('#myModal').modal('hide');

This event is provided by bootstrap, to manually hide a modal.

I have created a sample code. hope this will help you. 

 $('#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./ajax/libs/jquery/2.2.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis./ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./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>

Try this code

I added new attribute [data-modal-action="close"].. based on the click event it will close the modal automatically

HTML

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

Script

$("[data-modal-action=close]").click(function () {
        $("#myModal").modal("hide");
    });

本文标签： javascriptClosing the modal after i click on the buttonStack Overflow

版权声明：本文标题：javascript - Closing the modal after i click on the button - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741302272a2371157.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。