フォーム提出前に確認用ポップアップ/モーダルを表示

AngularJSでは、フォームデータを送信する前に、送信ボタンをクリックして入力した入力値を再確認して確認するためのポップアップを表示するにはどうすればよいですか？ jsのコードでフォーム提出前に確認用ポップアップ/モーダルを表示

2017-05-18 Sakky

私はあなたが探しているものを推測、UIの面で、 "モーダル" と呼ばれていますか？ここでいくつかの例を見つけることができますhttps://angular-ui.github.io/bootstrap/モーダルを検索してください。 –

はUib modalで試してみてください。 https://angular-ui.github.io/bootstrap/#!#modal

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); 
 
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($uibModal, $log, $document) { 
 
    var $ctrl = this; 
 
    $ctrl.animationsEnabled = true; 
 
    $ctrl.name = "Manikandan"; 
 

 
    $ctrl.open = function (size, parentSelector) { 
 
    var parentElem = parentSelector ? 
 
     angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined; 
 
    var modalInstance = $uibModal.open({ 
 
     animation: $ctrl.animationsEnabled, 
 
     ariaLabelledBy: 'modal-title', 
 
     ariaDescribedBy: 'modal-body', 
 
     templateUrl: 'myModalContent.html', 
 
     controller: 'ModalInstanceCtrl', 
 
     controllerAs: '$ctrl', 
 
     size: size, 
 
     appendTo: parentElem, 
 
     resolve: { 
 
     values: function() { 
 
      return $ctrl.name; 
 
     } 
 
     } 
 
    }); 
 

 
    modalInstance.result.then(function() { 
 
     $ctrl.msg = "Submitted"; 
 
     $ctrl.suc = true; 
 
    }, function(error) { 
 
     $ctrl.msg = 'Cancelled'; 
 
     $ctrl.suc = false; 
 
    }); 
 
    }; 
 
}); 
 

 

 
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($uibModalInstance, values) { 
 
var $ctrl = this; 
 
$ctrl.name= values; 
 
    $ctrl.ok = function() { 
 
    $uibModalInstance.close('ok'); 
 
    }; 
 

 
    $ctrl.cancel = function() { 
 
    $uibModalInstance.dismiss('cancel'); 
 
    }; 
 
});

<!doctype html> 
 
<html ng-app="ui.bootstrap.demo"> 
 
    <head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 

 
<div ng-controller="ModalDemoCtrl as $ctrl" class="modal-demo"> 
 
    
 
    <br> 
 
<form name="form" novalidate> 
 
    <input type="text" style="width:200px" class="form-control" name="name" ng-model="$ctrl.name" required><br> 
 
    <button type="button" ng-disabled="form.$invalid" class="btn btn-default" ng-click="form.$valid && $ctrl.open()">Save</button> 
 
</form><br> 
 
    <p ng-hide="!$ctrl.msg" class="alert" ng-class="{'alert-success':$ctrl.suc, 'alert-danger':!$ctrl.suc}">{{$ctrl.msg}}</p> 
 
    
 
</div> 
 
<script type="text/ng-template" id="myModalContent.html"> 
 
     <div class="modal-header"> 
 
      <h3 class="modal-title" id="modal-title">Your Details</h3> 
 
     </div> 
 
     <div class="modal-body" id="modal-body"> 
 
      
 
      <p>Are you sure, your name <b>{{$ctrl.name }}</b> is going to submit? 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">Submit</button> 
 
      <button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button> 
 
     </div> 
 
    </script> 
 
    </body> 
 
</html>

出典

2017-05-18 06:37:11

：

if(confirm("xxx")) 
{ 
     //do next step 
}

出典

2017-05-18 05:57:09

フォーム提出前に確認用ポップアップ/モーダルを表示

答えて

関連する問題