How to create a modal in angularJS?

Question

Hi I am unable to create a modal in AngularJS, also, I don't know where to start regarding modal creation implementation in angularJS. Please share your suggestions or any tutorials on how to create a modal in AngularJS. Thank you!

Solution 1

This is something you could do yourself. However, there are plenty of libraries that already do this.

https://pathgather.github.io/popeye/

If you want to pursue yourself then checkout Ben's article on the topic.

http://www.bennadel.com/blog/2806-creating-a-simple-modal-system-in-angularjs.htm

Solution 2

If you want to create an custom modal or dialog box you first need to create a directive and need to control the behaviour of the popup based on an event add a handler that will open the dialog box such as

//Keep this event at the top of your hierarchy.
$scope.$on('OPEN_DIALOG_BOX',function(event,data){
    event.stopPropagation();//stops the event from bubbling up the event chain.
    //add a variable that will show or hide the modal dialog box.
    $scope.hideDialog = true;
    //use data to pass custom message to bind in your html.
    $scope.message = data.message; 
});

//Call this event
$scope.$emit('OPEN_DIALOG_BOX');

or

You can use angular material dialog box.

Or

Use ng-dialog as explained in this blog

FIDDLE FOR THE CODE SNIPPET

I hope this helps.

Comments

[Naresh]

Thank You, I've a small problem in running, I don't know what dependant links are required to run a modal dialog in AngularJS. Like there are some CDNs that are required, please let me know what are the required links or CDNs.

[Vipul Panth]

Sorry i am not able to get you, Are you asking which version of angular you have to use for so you can use angular 1.5, thanks and if helps please accept the answer so that it could be helpful for others.

[Naresh]

Will you please run the code in snippet or provide any demo link... I'm not able to run your code. Thank you!

[Vipul Panth]

Here is a fiddle i hope this helps.