1000字范文 > angular 实现modal windows效果（即模态窗口半透明的遮罩层）以及bootstrap(css

angular 实现modal windows效果（即模态窗口半透明的遮罩层）以及bootstrap(css

时间：2020-06-02 15:05:51

废话不说，直接上代码。可直接看效果，对着分析。。今天算是bootstrap 入门了，开心。。

突然居然很多事情就是那样，不要太多的畏惧，迈出第一步其实就成功了一半了。

<html ng-app="app"><head><script src="../lib/js/angular.js"></script><script src="../lib/js/ui-bootstrap-tpls-0.13.0 (1).js"></script><link href="../lib/bootstrap-3.3.4/css/bootstrap.css" rel="stylesheet"></head><body><div ng-controller="appController"><script type="text/ng-template" id="myModalContent.html"><div class="modal-header"><h3>I'm a modal!</h3></div><div class="modal-body"><span>Message:{{message}}</span><ul><li ng-repeat="item in items"><a ng-click="selected.item=item">{{ item }}</a></li></ul>Selected: <b>{{ selected.item }}</b></div><div class="modal-footer"><button class="btn btn-primary" ng-click="ok()">OK</button><button class="btn btn-warning" ng-click="cancel()">Cancel</button></div></script><button class="btn btn-default" ng-click="showModal()">Open me!</button><div ng-show="selected">Selection from a modal: {{ selected }}</div><div class="col-xs-6"><div class="well well-sm">I start to learn bootstrap css frow now on!!</div><div class="well well-lg">I start to learn bootstrap css frow now on!!</div><div class="well ">I start to learn bootstrap css frow now on!!</div></div><div class="col-xs-6"><div class="panel panel-default panel-primary" ><div class="panel-heading">Panel heading without title</div><div class="panel-body">Panel content</div></div></div><div class="col-xs-6"><div class="panel panel-default panel-success"><div class="panel-heading"><h1 class="panel-title">Panel title</h1></div><div class="panel-body">Panel content</div></div></div><div class="col-xs-6"><div class="panel panel-default"><div class="panel-heading"><h1 class="panel-title">Panel title</h1></div><div class="panel-body">Panel content</div><div class="panel-footer">Panel footer</div></div></div><div class="col-xs-6"><div class="panel panel-default"><div class="panel-heading">Panel heading</div><ul class="list-group"><li class="list-group-item">Cras justo odio</li><li class="list-group-item">Dapibus ac facilisis in</li><li class="list-group-item">Morbi leo risus</li><li class="list-group-item">Porta ac consectetur ac</li><li class="list-group-item">Vestibulum at eros</li></ul></div></div><div class="col-xs-6"><div class="panel panel-default"><div class="panel-heading">Panel heading</div><ul class="list-group"><li class="list-group-item">Cras justo odio</li><li class="list-group-item">Dapibus ac facilisis in</li><li class="list-group-item">Morbi leo risus</li><li class="list-group-item">Porta ac consectetur ac</li><li class="list-group-item">Vestibulum at eros</li></ul></div></div><div class="col-xs-6"><div class="panel panel-default"><div class="panel-heading">Panel heading</div><ul class="list-group"><li class="list-group-item"><span class="badge">14</span>Cras justo odio</li></ul></div></div><div class="col-xs-6"><div class="list-group"><a href="#" class="list-group-item active">Cras justo odio</a><a href="#" class="list-group-item">Dapibus ac facilisis in</a><a href="#" class="list-group-item">Morbi leo risus</a><a href="#" class="list-group-item">Porta ac consectetur ac</a><a href="#" class="list-group-item">Vestibulum at eros</a></div></div><div class="col-xs-6"><button type="button" class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span></button><button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span> Star</button></div><div class="col-xs-6"><div class="panel panel-default"><div class="panel-heading">Panel heading</div><table class="table"><tr><th>#</th><th>Month</th><th>Savings</th><th>Savings</th></tr><tr><th>1</th><td>January</td><td>$100</td><td>$100</td></tr><tr><th>2</th><td>January</td><td>$100</td><td>$100</td></tr><tr><th>3</th><td>January</td><td>$100</td><td>$100</td></tr><tr><th>4</th><td>January</td><td>$100</td><td>$100</td></tr></table></div></div></div></body><script>angular.module('app', ['ui.bootstrap']).service('DataService', ['$rootScope',function($rootScope) {this.data = {};this.data.message = 'This is a message from a service';this.data.items = ['item1', 'item2', 'item3'];}]).controller('myModal', ['$scope', '$modalInstance', 'DataService',function($scope, $modalInstance, dataService) {$scope.data = dataService.data;$scope.message = dataService.data.message;$scope.items = dataService.data.items;$scope.selected = {item: $scope.items[0]};$scope.test = function(item){$scope.selected.item = item;}$scope.ok = function() {$modalInstance.close($scope.selected.item);};$scope.cancel = function() {$modalInstance.dismiss('cancel');};}]).controller('appController', ['$scope', '$modal', '$log',function($scope, $modal, $log) {//$scope.data = dataService.data;$scope.showModal = function() {var modalInstances = $modal.open({templateUrl: 'myModalContent.html',controller: 'myModal'});modalInstances.result.then(function(selectedItem) {$scope.selected = selectedItem;},function(){$log.info('Modal dismissed at :'+new Date())})};}]);</script></html>

angular 实现modal windows效果（即模态窗口半透明的遮罩层）以及bootstrap(css components js)的初步学习...

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。