Custom alert using Boostarap 3 and Angular 1.6
- Make all size popups and alerts using various options
-
Use npm to install the new module:
npm install lg-custom-alert --save
-
Import the dependency
- Bootstrap - CSS is enough
- Angular
- ui.bootstrap
<!-- Optional --> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js" charset="utf-8"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" charset="utf-8"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js" charset="utf-8"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
-
Import
lg.customAlert.min.js
javascript and css file into your HTML file<script src="dist/lg.customAlert.min.js"></script>
-
Add
lg.customAlert
as a dependency on your Angular app:angular.module("myApp", ["lg.customAlert", "ui.bootstrap"]);
-
Put
lg-alert
directive along with button elementslg-alert
- the scope function to be called after alert successlg-message
- Message to be displayed in the modallg-size
- Size to be displayed in the modal['lg', 'md', 'sm']
lg-type
- Type of the modal to be displayed in the modal['confirm', 'proceed', 'ok', 'delete']
<button class="btn btn-primary" lg-alert="just_log()" lg-message="Please confirm to log the message" lg-size="lg" lg-type="confirm"> Click for Alert </button>