runsly html+css教程 2022-04-01

Bootstrap 3 & AngularJS 模态对话窗口设计实例

现在的网页设计中要求弹出窗口时，不再是普通的popup旧式弹窗了，而是加入了一些动态的设计元素，比如渐入渐出的效果。在进行个性化弹出窗口的设计时，我们通常会借用其他一些第三方插件来实现，本文将介绍 Bootstrap 3 & AngularJS 模态对话弹出窗口的设计。

Bootstrap 3 & AngularJS 模态对话弹出窗口

实例介绍

1、引用3个JS插件

本实例使用了Bootstrap 3 、 AngularJS插件来实现模态窗口设计，需要引用3个JS文件。

<script src="angular.min.js"></script>
<script src="ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
<script src="dialogs.min.js" type="text/javascript"></script>

2、引用CSS样式文件

实例的CSS样式也有bootstrap.min.css提供，因此需要引用bootstrap.min.css文件。

<link rel='stylesheet' href='bootstrap.min.css'>

3、修改弹窗内容

弹窗内容可以在JS代码里更改。

switch (which) {
  // Error Dialog
  case 'error':
  dlg = $dialogs.error('这里显示错误信息');
  break;
  // Wait / Progress Dialog
  case 'wait':
  dlg = $dialogs.wait(msgs[i++], progress);
  fakeProgress();
  break;
  // Notify Dialog
  case 'notify':
  dlg = $dialogs.notify('有事!', '我有些事情要告诉你.');
  break;
  // Confirm Dialog
  case 'confirm':
  dlg = $dialogs.confirm('请确认', '是这个吗?');
  dlg.result.then(function (btn) {
    $scope.confirmed = '是的!';
  }, function (btn) {
    $scope.confirmed = '不是!';
  });
  break;
  // Create Your Own Dialog
  case 'create':
  dlg = $dialogs.create('/dialogs/whatsyourname.html', 'whatsYourNameCtrl', {}, { key: false, back: 'static' });
  dlg.result.then(function (name) {
    $scope.name = name;
  }, function () {
    $scope.name = '输入你的名字.';
  });
  break;}
; // end switch

// for faking the progress bar in the wait dialog
var progress = 25;
var msgs = [
'嗨! 马上开始...',
'已经完成30%...',
'完成了80%',
'执行完毕!'];

4、在HTML修改按钮文本

<div class="row">
  <div class="col-md-12">
    <button class="btn btn-danger" ng-click="launch('error')">Error Dialog</button>
    
    <button class="btn btn-primary" ng-click="launch('wait')">Wait Dialog</button>
    
    <button class="btn btn-default" ng-click="launch('notify')">Notify Dialog</button>
    
    <button class="btn btn-success" ng-click="launch('confirm')">Confirm Dialog</button>
        
    <button class="btn btn-warning" ng-click="launch('create')">Custom Dialog</button>
  </div>
</div>

完整HTML代码

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>Modal Dialogs</title>
  
  
  <link rel='stylesheet' href='bootstrap.min.css'>
  
<style>
/* Fix for Bootstrap 3 with Angular UI Bootstrap */

.modal { 
display: block;
}

/* Custom dialog/modal headers */

.dialog-header-error { background-color: #d2322d; }
.dialog-header-wait { background-color: #428bca; }
.dialog-header-notify { background-color: #eeeeee; }
.dialog-header-confirm { background-color: #333333; }
.dialog-header-error span, .dialog-header-error h4,
.dialog-header-wait span, .dialog-header-wait h4,
.dialog-header-confirm span, .dialog-header-confirm h4 { color: #ffffff; }

/* Ease Display */

.pad { padding: 25px; }
</style>

</head>

<body translate="no" >
  <html ng-app="modalTest">
  <head>
    <script src="angular.min.js"></script>
    <script src="ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
    <script src="dialogs.min.js" type="text/javascript"></script>
  </head>
  <body ng-controller="dialogServiceTest" class="pad">
    <h2>Bootstrap 3 & AngularJS 模态对话窗口</h2><br />
    
    <div class="row">
      <div class="col-md-12">
        <button class="btn btn-danger" ng-click="launch('error')">Error Dialog</button>
    
        <button class="btn btn-primary" ng-click="launch('wait')">Wait Dialog</button>
    
        <button class="btn btn-default" ng-click="launch('notify')">Notify Dialog</button>
    
        <button class="btn btn-success" ng-click="launch('confirm')">Confirm Dialog</button>
        
        <button class="btn btn-warning" ng-click="launch('create')">Custom Dialog</button>
      </div>
    </div>
    <br />
    
   
    
  </body>
</html>
   
      <script id="rendered-js" >
angular.module('modalTest', ['ui.bootstrap', 'dialogs']).
controller('dialogServiceTest', function ($scope, $rootScope, $timeout, $dialogs) {
  $scope.confirmed = 'You have yet to be confirmed!';
  $scope.name = '"Your name here."';

  $scope.launch = function (which) {
    var dlg = null;
    switch (which) {

      // Error Dialog
      case 'error':
        dlg = $dialogs.error('这里显示错误信息');
        break;

      // Wait / Progress Dialog
      case 'wait':
        dlg = $dialogs.wait(msgs[i++], progress);
        fakeProgress();
        break;

      // Notify Dialog
      case 'notify':
        dlg = $dialogs.notify('有事!', '我有些事情要告诉你.');
        break;

      // Confirm Dialog
      case 'confirm':
        dlg = $dialogs.confirm('请确认', '是这个吗?');
        dlg.result.then(function (btn) {
          $scope.confirmed = '是的!';
        }, function (btn) {
          $scope.confirmed = '不是!';
        });
        break;

      // Create Your Own Dialog
      case 'create':
        dlg = $dialogs.create('/dialogs/whatsyourname.html', 'whatsYourNameCtrl', {}, { key: false, back: 'static' });
        dlg.result.then(function (name) {
          $scope.name = name;
        }, function () {
          $scope.name = '输入你的名字.';
        });

        break;}
    ; // end switch
  }; // end launch

  // for faking the progress bar in the wait dialog
  var progress = 25;
  var msgs = [
  '嗨! 马上开始...',
  '已经完成30%...',
  '完成了80%',
  '执行完毕!'];

  var i = 0;

  var fakeProgress = function () {
    $timeout(function () {
      if (progress < 100) {
        progress += 25;
        $rootScope.$broadcast('dialogs.wait.progress', { msg: msgs[i++], 'progress': progress });
        fakeProgress();
      } else {
        $rootScope.$broadcast('dialogs.wait.complete');
      }
    }, 1000);
  }; // end fakeProgress 

}) // end dialogsServiceTest
.controller('whatsYourNameCtrl', function ($scope, $modalInstance, data) {
  $scope.user = { name: '' };

  $scope.cancel = function () {
    $modalInstance.dismiss('canceled');
  }; // end cancel

  $scope.save = function () {
    $modalInstance.close($scope.user.name);
  }; // end save

  $scope.hitEnter = function (evt) {
    if (angular.equals(evt.keyCode, 13) && !(angular.equals($scope.name, null) || angular.equals($scope.name, '')))
    $scope.save();
  }; // end hitEnter
}) // end whatsYourNameCtrl
.run(['$templateCache', function ($templateCache) {
  $templateCache.put('/dialogs/whatsyourname.html', '<div class="modal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title"><span class="glyphicon glyphicon-star"></span> 用户姓名</h4></div><div class="modal-body"><ng-form name="nameDialog" novalidate role="form"><div class="form-group input-group-lg" ng-class="{true: \'has-error\'}[nameDialog.username.$dirty && nameDialog.username.$invalid]"><label class="control-label" for="username">姓名:</label><input type="text" class="form-control" name="username" id="username" ng-model="user.name" ng-keyup="hitEnter($event)" required><span class="help-block">输入你的全名, 姓 & 名.</span></div></ng-form></div><div class="modal-footer"><button type="button" class="btn btn-default" ng-click="cancel()">Cancel</button><button type="button" class="btn btn-primary" ng-click="save()" ng-disabled="(nameDialog.$dirty && nameDialog.$invalid) || nameDialog.$pristine">Save</button></div></div></div></div>');
}]); // end run / module
//# sourceURL=pen.js
    </script>

  

</body>

</html>

execcodegetcode

代码解释

本实例包含的几个插件文件，均在源码压缩包里，引用时需注意路径要写正确。

您可能对以下文章也感兴趣

纯CSS3实现模态弹出窗口
CSS实现模式窗口(modal window)覆盖层的3种方法

弹窗

2021服务器优惠

阿里云：2核2G5M服务器60元/年、2核4G 200元/年、4核8G服务器365元/年更多...
腾讯云：云产品限时秒杀，爆款1核2G云服务器，首年74元更多...