AngularJS Modal Factory

Size
3,839 Kb
Views
14,168

How do I make an angularjs modal factory?

Simple AngularJS factory for the creation of modal dialogs.. What is a angularjs modal factory? How do you make a angularjs modal factory? This script and codes were developed by António Capelo on 15 December 2022, Thursday.

AngularJS Modal Factory Previews

AngularJS Modal Factory - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>AngularJS Modal Factory </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div ng-app="app"> <div class="maincontainer" id="main" ng-controller="MainCtrl"> <h1>Modal Factory</h1>
<p>Simple AngularJS factory for the creation of <b>modal dialogs</b>.
This factory returns a modal dialog, based on a <b>config object</b> passed on each creation.</p>
<p>The created service just provides to simple functions: <ul>
<li> <b>turnMeOn</b>: activates the modal</li>
<li> <b>turnMeOff</b>: deactivates the modal</li>
</ul>
<p>How to use:</p>
<ol>
<li><b>update</b> the modalfactory.js to your AngularJS app name, in case you use other than "app"</li>
<li><b>inject</b> it as a controller dependency</li>
<li><b>instantiate</b> the service as a new scope variable</li>
<li><b>use</b> the modal functions where you please in the controller :)</li>
</ol> Selected option: <select class="form-control" ng-model="option" ng-options="option.name for option in data"></select> <div class="center"> <button ng-click="activate()">Click to Modal it up</button> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

AngularJS Modal Factory - Script Codes CSS Codes

* { font-family: verdana, arial, sans-seriff; line-height: 30px;
}
h1, p { font-weight: 200;
}
.center { text-align: center;
}
/*--- Modal Factory Styles ---*/
body { position: relative; // to enable the centering of the modal relative to the document's body
}
.ng-modal-overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: #273a47; opacity: .5; -ms-filter: "alpha(opacity = 50)";
}
.ng-modal-container { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999;
}
.ng-modal-container .ng-modal { width: 400px; margin: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); padding: 10px; background: #ffffff; border-radius: 3px; border: 1px solid #2f2f2f; text-align: center;
}
.ng-modal-container .ng-modal .btn { margin: 20px;
}
.ng-modal-container .ng-modal .ng-modal-close { color: grey; position: relative; top: 0; left: 0; float: right; text-align: right; text-decoration: none;
}
.ng-modal-container .ng-modal .ng-modal-close:hover { color: grey;
}

AngularJS Modal Factory - Script Codes JS Codes

'use strict';
var app = angular.module('app', []);
app.factory('modalFactory', function ($compile, $rootScope, $controller) { return function (config) { // check that there's a template provided if (typeof config.template === 'undefined' && typeof config.templateUrl === 'undefined') { throw new Error('The service needs an html template or a te mplate url to be passed with the config object'); } // define auxiliary variables var template, html, scope, containerClass = 'ng-modal-container', overlayDivClass = 'ng-modal-overlay', useOverlay = typeof config.useOverlay === 'boolean' ? config.useOverlay : true, container = angular.element(config.selector || document.body), overlayDiv = '<div class="'+ overlayDivClass + '"></div>'; if (config.templateUrl) { $http.get(config.templateUrl).then(function(response) { template = response.data; // the html var has to be set on the 2 options of the conditional since one has an async call html = '<div class="' + containerClass + '"><div class="ng-modal"><a href="" class="ng-modal-close" ng-click="turnMeOff()">&times;</a>' + template + '</div></div>'; }); } else { template= config.template html = '<div class="' + containerClass + '"><div class="ng-modal"><a href="" class="ng-modal-close" ng-click="turnMeOff()">&times;</a>' + template + '</div></div>'; } /** * Activates the modal. * * @param localVars - {Object} data passed from the caller controller */ function turnMeOn (localVars) { var domElement, overlay; scope = $rootScope.$new(); // assign the deactivation function to the created scope scope.turnMeOff = turnMeOff; // if there's a modal already on the DOM, remove it before adding another domElement = angular.element('.'+containerClass); domElement.remove(); // if there's an overlay div already on the DOM, remove it before adding another overlay = angular.element('.' + overlayDivClass); overlay.remove(); // if there's data passed along, copy it to the created scope if (localVars) { for (var prop in localVars) { scope[prop] = localVars[prop]; } } // create DOM elements domElement = angular.element(html); // the $compile() function compiles an HTML String/DOM into a template and produces a template function, which then is used // to link the template and a scope together $compile(domElement)(scope); if (useOverlay) { overlay = angular.element(overlayDiv); angular.element(document.body).append(overlay); } container.prepend(domElement); } function turnMeOff() { var domElement = angular.element('.' + containerClass), overlay = angular.element('.' + overlayDivClass); if (domElement) { domElement.remove(); } if (overlay) { overlay.remove(); } scope.$destroy(); } return { turnMeOn: turnMeOn, turnMeOff: turnMeOff }; };
});
app.controller('MainCtrl',['$scope','modalFactory', function ($scope, modalFactory) { // instantiate modal service $scope.statusModal = new modalFactory({ template: '<h1>Here\'s the modal!</h1><p>{{status}} was selected</p>' }); $scope.turnMeOn = $scope.statusModal.turnMeOn; // dummy data $scope.data = [{name:'Option #1'}, {name:'Option #2'}]; $scope.option = $scope.data[0]; $scope.activate = function() { var config = {}; config.status = $scope.option.name; $scope.turnMeOn(config); } } ]);
AngularJS Modal Factory - Script Codes
AngularJS Modal Factory - Script Codes
Home Page Home
Developer António Capelo
Username capelo
Uploaded December 15, 2022
Rating 3.5
Size 3,839 Kb
Views 14,168
Do you need developer help for AngularJS Modal Factory?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

António Capelo (capelo) Script Codes
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!