Discussion :

[Maitre2B]

Bonjour à tous,

C'est la première fois que j'utilise des modals, ça à l'air plutôt simple, mais evidemment, rien ne fonctionne comme je le voudrais.
J'ai repris le code de ce JsFiddle : http://jsfiddle.net/dwmkerr/8MVLJ/

controller

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
app.controller("ControllerDetailsRequest", function($rootScope, $scope, $cookies, $routeParams, $http, StockUserData, StockRequestData, ModalService){
 
$scope.Report = function () { // Signale la demande d'aide       
    ModalService.showModal({
            templateUrl: 'partials/modal.html',
            controller: "ModalController"
        }).then(function(modal) {
            modal.element.modal();
            modal.close.then(function(result) {
            });
        });
  };
});
 
app.controller('ModalController', function($scope, close) {
 
 $scope.close = function(result) {
  close(result, 500); // close, but give 500ms for bootstrap to animate
 };
 
});

le HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<form ng-submit="Report()">
   <span ng-bind="report_message"></span>
   <button type="submit" class="btn btn-danger profil-btn"><i class="fa fa-warning"></i>  Signaler</button>
</form>

Le modal.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Yes or No?</h4>
      </div>
      <div class="modal-body">
        <p>It's your call...</p>
      </div>
      <div class="modal-footer">
        <button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal">No</button>
        <button type="button" ng-click="close('Yes')" class="btn btn-primary" data-dismiss="modal">Yes</button>
      </div>
    </div>
  </div>
</div>

En plus des problèmes de CSS dû à mon Template, il y a des bugs au niveau du modal.
Si je clique en dehors du modal, il disparait et le shadow aussi, mais il n'est pas réellement fermé.
Du coup, en répétant cette action, mon HTML s'allonge de plusieurs <div> à chaque fois.
Je précise que sur le JsFIddle, cela n'arrive pas. Cliquer en dehors du modal ne fait rien.


Donc :- Comment faire pour que le modal se ferme seul après s'être affiché après 3 secondes par exemple.
- Comment faire pour que le modal agisse normalement (comme sur le JsFiddle)