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)

[NoSmoking]

Bonjour,
je pense qu'il est impératif que tu règles ton problème de CSS pour remettre de l'ordre dans tes couches avant de regarder la suite.

[Maitre2B]

Après plusieurs modification du CSS, j'arrive à quelque chose de bien plus propre.

J'ai touché au z-index de la <div> qui fait un shadow.
J'ai mis un margin-top : 50%


(Sur l'image, je cache la majeur partie du site car il s'agit d'un projet pas encore breveté.)

Il ne reste donc plus que 2 soucis :
- Le modal qui disparait tout seul alors que ce n'est pas censé le faire. Il disparait mais ne se ferme pas.
- Faire disparaitre le modal après s'être affiché environ 3 secondes.

[NoSmoking]

Utilise un « setTimeout » pour fermer ta modal, et en reprenant l'exemple fourni dans ton JsFiddle cela pourrait donner

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
app.controller('Controller', function($scope, ModalService, $timeout){
    $scope.show = function () {
        ModalService.showModal({
            templateUrl: 'modal.html',
            controller: 'ModalController'
        }).then(function (modal) {
            // ajout d'un setTimeout
            $timeout(function () {
                modal.element.modal('hide');
            }, 3000);
 
            modal.element.modal();
            modal.close.then(function (result) {
                $scope.message = 'You said ' + result;
            });
        })
    };
});

[Maitre2B]

Le SetTimeout fonctionne parfaitement.
Mais je ne comprends toujours pas pourquoi le modal se ferme si l'on clique à côté.

[JujuPomme]

Bonjour,

C'est dans les classes liés à Bootstrap. Regarde la classe modal ou la classe fade, tu dois avoir la gestion que tu cherches dedans.