成人国产日韩在线,久久99精品中文字幕在,向日葵视频污污下载

技術頻道 - html技術

Bootstrap 3 & AngularJS 模態(tài)對話窗口設計實例

作者:admin 時間:2021-8-12 10:42:27 瀏覽:

現(xiàn)在的網(wǎng)頁設計中要求彈出窗口時，不再是普通的popup舊式彈窗了，而是加入了一些動態(tài)的設計元素，比如漸入漸出的效果。在進行個性化彈出窗口的設計時，我們通常會借用其他一些第三方插件來實現(xiàn)，本文將介紹 Bootstrap 3 & AngularJS 模態(tài)對話彈出窗口的設計。

Bootstrap 3 & AngularJS 模態(tài)對話彈出窗口

實例介紹

1、引用3個JS插件

本實例使用了Bootstrap 3 、 AngularJS插件來實現(xiàn)模態(tài)窗口設計，需要引用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、修改彈窗內(nèi)容

彈窗內(nèi)容可以在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 = [
'嗨! 馬上開始...',
'已經(jīng)完成30%...',
'完成了80%',
'執(zhí)行完畢!'];

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 模態(tài)對話窗口</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 = [
  '嗨! 馬上開始...',
  '已經(jīng)完成30%...',
  '完成了80%',
  '執(zhí)行完畢!'];

  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>