AngularJS Modal Popup open and close from controller

AngularJS Modal Popup open and close from controller

In this Post We Will Explain About is AngularJS Modal Popup open and close from controller With Example and Demo.

Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Show a Twitter Bootstrap Modal with Angular.js Directives

In this post we will show you Best way to implement AngularJS Bootstrap-Modal with Custom URL Routing, hear for How to How to Open Twitter Bootstrap Modal Popup in AngularJS with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

How to Open Twitter Bootstrap Modal Popup in AngularJS

In this POST I am going to simple provide some help on how we may required with Twitter simple bootstrap modal popup box while using it simple inside script like as a AngularJS controller simple methods or function, as well as generally we have to any event in AngularJS script where we want to simple modal open or close means hide and show to twitter bootstrap modal popup using AngularJS source code below.

READ :  vue js serialize form submit in Laravel

Add below Modal popup HTML in your template:

<div class="modal fade" tabindex="-1" role="dialog" id="my_live_modal_box">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
	<!-- Modal Header Source code-->
      <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">infinityknow.com Modal title</h4>
      </div>
	  <!-- Modal Body Source code-->
      <div class="modal-body">
         <p>Hi Dear Friednds Hello <br/> Welcome to infinityknow.com . Modal popup content simple setp by steps Examples</p>
      </div>
	  <!-- Modal Footer Source code-->
      <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><!-- infinityknow.com /.modal-content -->
  </div><!--infinityknow.com /.modal-dialog -->
</div><!--infinityknow.com /.modal -->

Open Modal Popup in AngularJS:

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

Close Modal Popup using AngularJS

We can use following simple AngularJS script to close your popup, just simple need to update your live the modal popup function here, as well show and hide means change show to hide.

READ :  Codeigniter config set and get variable

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

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

Simple Prevent Modal popup Box from closing using AngularJS

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

Note if we still simple want to close your modal popup by using any key to keyboard escape key as well as we simple make keyboard is source code below equal to true, as showing in below angular script Like as a…

close modal popup by using keyboard escape key

element.modal({
    backdrop: 'static',
    keyboard: true
});

Example

I hope you have Got Show a Twitter Bootstrap Modal with Angular.js Directives And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.

READ :  Vuejs Http Get Method with parameters - Vue-Resource Get Request

Add a Comment

Your email address will not be published. Required fields are marked *