How to Open Twitter Bootstrap Modal Popup in AngularJS

Introduction:

In this tutorial I am going to provide help on how you should deal with Twitter bootstrap modal popup while using it inside AngularJS controller function, or basically you have event in AngularJS where you want to open or close twitter bootstrap modal popup.

Add below Modal popup HTML in your template:

<div class="modal fade" tabindex="-1" role="dialog" id="my_modal_popup">
  <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">×</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
         <p>Modal popup content</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Open Modal Popup in AngularJS:

Use following line of code to open modal popup in AngularJS controller function:

var element = angular.element('#my_modal_popup');
element.modal('show');

Close Modal Popup in AngularJS:

You can use following script to close popup, just need to update the modal function here, change `show` to `hide`.

var element = angular.element('#my_modal_popup');
element.modal('hide');

Prevent Twitter Bootstrap Modal Popup from closing when we click out side of the modal popup:

I have see many of us don’t want to close the modal popup when user clicks outside area of modal popup, that is default behaviour of bootstrap modal popup we can disable it in different ways:

Prevent Modal popup from closing in AngularJS:

var element = angular.element('#my_modal_popup');
element.modal({
    backdrop: 'static',
    keyboard: false
});

We just need to replace modal popup parameter from string to object along with two extra properties to make bootstrap modal popup static.

Note – if you still want to close modal popup by using keyboard escape key you simple make keyboard is equal to true, as showing in below script:

var element = angular.element('#my_modal_popup');
element.modal({
    backdrop: 'static',
    keyboard: true
});

You can also learn how to handle crud operations in AngularJs using PHP from this tutorial – AngularJS PHP CRUD (Create, Read, Update, Delete) Operations

Let me know if you have any questions using comment box below.

Happy Coding!