1

Tengo un Slider de JQuery UI que no se muestra dentro de un modal.

¿Qué tengo que hacer para que el Slider se muestre dentro del modal?

Éste es mi código (también disponible en Plunker):

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function($scope, $uibModal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.animationsEnabled = true;

  $scope.open = function(size) {

    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function() {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function(selectedItem) {
      $scope.selected = selectedItem;
    }, function() {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };



});

// Please note that $uibModalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function($scope, $uibModalInstance, items) {
  $scope.cancel = function() {
    $uibModalInstance.dismiss('cancel');
  };
});

$(function() {
  $(".slider").slider();
});
<script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div ng-app="ui.bootstrap.demo">
  <div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
      <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
      </div>
      <div class="modal-body">
        <span>SLIDER?</span>
        <div class="slider"></div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
      </div>
    </script>
    <button type="button" class="btn btn-default" ng-click="open()">Open me!</button>

    <div>
      <span>Slider OK</span>
      <div class="slider"></div>
    </div>
  </div>
</div>

2 respuestas 2

2

El problema está en que arrancas el slider cuando se carga la página en lugar de cuando se abre el modal. Por lo que el slider se crea al principio.

Una posible solución sería hacer que el slider se cree cuando se abra el modal (y especificando que debe ser dentro del modal y no fuera porque si no, parece que jQuery tiene problemas).

Aquí dejo una posible solución modificando tu código original mínimamente (he añadido el slider dentro de la función que abre y renderiza el modal):

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function($scope, $uibModal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.animationsEnabled = true;

  $scope.open = function(size) {

    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function() {
          return $scope.items;
        }
      }
    });
    
    modalInstance.rendered.then( function() {
      $(".modal-body .slider").slider()
    });

    modalInstance.result.then(function(selectedItem) {
      $scope.selected = selectedItem;
    }, function() {
      $log.info('Modal dismissed at: ' + new Date());
    });
    
  };



});

// Please note that $uibModalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function($scope, $uibModalInstance, items) {
  $scope.cancel = function() {
    $uibModalInstance.dismiss('cancel');
  };
});
<script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div ng-app="ui.bootstrap.demo">
  <div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
      <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
      </div>
      <div class="modal-body">
        <span>SLIDER?</span>
        <div class="slider"></div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
      </div>
    </script>
    <button type="button" class="btn btn-default" ng-click="open()">Open me!</button>

    <div>
      <span>Slider OK</span>
      <div class="slider"></div>
    </div>
  </div>
</div>

8
  • @Tuco gracias, respondí allí también.
    – Alvaro Montoro
    Commented el 2 jun. 2016 a las 17:34
  • Tu respuesta funciona (+1 gracias), pero el hecho de tener que agregar un timeout de 1 ms me causa ruido. Que garantia hay de que esto funcione el 100% de las veces?
    – The One
    Commented el 2 jun. 2016 a las 17:36
  • @Tuco A mí tampoco me gusta la parte del milisegundo. Deja y le echo un ojo para ver si encuentro una opción mejor
    – Alvaro Montoro
    Commented el 2 jun. 2016 a las 17:42
  • En la documentacion del modal vienen dos propiedades en el resultado del metodo open del modal: opened y rendered. Creo que se puede atacar por alli
    – The One
    Commented el 2 jun. 2016 a las 17:45
  • @Tuco Lo solucioné con rendered, opened me daba fallo. Prueba el ejemplo ahora
    – Alvaro Montoro
    Commented el 2 jun. 2016 a las 17:46
1

Adicionalmente a la excelente respuesta de Alvaro, esta solución solo usa los componentes de JQuery UI y no se presenta el problema descrito.

PLUNKER AQUI

<head>
 <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
 <link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
 <script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
 <link rel="stylesheet" href="style.css" />
 <script src="script.js"></script>
</head>

<body>
 <meta charset="utf-8" />
 <title>dialog demo</title>
 <button id="opener">open the dialog</button>
 <div id="dialog" title="Dialog Title">I'm a dialog
 <div id="slider"></div>
 </div>
</body>
</html>

JS

$(function() {
 $("#dialog").dialog({
  autoOpen: false
 });
$("#opener").click(function() {
$("#dialog").dialog("open");
$("#slider").slider();
});
});
0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.