Modal qui bug

Version imprimable

1 pièce(s) jointe(s)

Modal qui bug

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:

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:

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:

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)

25/06/2016, 18h41
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.
25/06/2016, 19h19
Maitre2B

1 pièce(s) jointe(s)

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%

Pièce jointe 213937
(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.

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

Code:

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;
            });
        })
    };
});

27/06/2016, 21h29
Maitre2B

Le SetTimeout fonctionne parfaitement.
Mais je ne comprends toujours pas pourquoi le modal se ferme si l'on clique à côté.
28/06/2016, 09h28
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. :)