Mantain style of modal with ui.bootstrap modals

Question

I'm using a Bootstrap modal to show details of selected items. I have a snippet of my modal window that i want to make appear. If i use it as a modal template I have issues with the style. But if I trigger the modal window as a normal modal, not a ui.bootstrap one, everything works fine. This are my files:

App.js

var app = angular.module('app', ['ui.router', 'ui.bootstrap']);
app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
    $urlRouterProvider.otherwise('/');

$stateProvider.state('home', {
    url: '/',
    templateUrl: 'productos/productos.html'
});
}]);

app.controller('ModalCtrl', function($scope,  $uibModal) {

      $scope.items = [{
          nombre: 'Federico Ribero',
          thumb: 'http://placehold.it/369x246',
          desc_corta: 'Esto es la decripcion corta de Fede',
          descripcion: 'Esto es la descripcion de Fede'
      },{
          nombre: 'Camila Nosotti',
          thumb: 'http://placehold.it/369x246',
          desc_corta: 'Esto es la decripcion corta de Cami',
          descripcion: 'Esto es la descripcion de Cami'
      },{
          nombre: 'Juliana Ribero',
          thumb: 'http://placehold.it/369x246',
          desc_corta: 'Esto es la decripcion corta de Juli',
          descripcion: 'Esto es la descripcion de Juli'
      }]

      $scope.showModal = function(selectedItem) {

          var uibModalInstance = $uibModal.open({
            templateUrl : 'modalContent.html',
            controller : function($scope, $uibModalInstance, $uibModal, item){
                $scope.item = item;
            },
            resolve: {
                item: function(){
                    return selectedItem;
                }
            } // empty storage
          });

          uibModalInstance.result.then(function(selectedItem){
            $scope.selected = selectedItem;
          },function(){
            //on cancel button press
            console.log("Modal Closed");
          });
      };                   
});

View with modal


        
            
                
                    
                        
                            
                                ALL
                                HTML
                                Wordpress
                                UI/UX
                                PRINT
                            
                        
                    
                
                
                        
                            
                            

                                
                                

                                    
                                    
                                        
                                        
                                            
                                        
                                    
                                    

                                    
                                    
                                        
                                        Shoes
                                        {{item.nombre}}

                                        
                                        {{item.desc_corta}}
                                        

                                        
                                        
                                            Ver más 
                                            
                                            
                                            
                                            
                                        

                                    
                                    

                                
                                

                            
                            
                                                                    
                
                
                    
                        View All

Modal triggered by javascript with no style problems


        
            
                
                
                    
                    
                        
                        Vista completa del artículo
                    
                    
                    
                         MY MODAL CONTENT GOES HERE.......
                    
                    
                    
                        Ask about details

UI Bootstrap Modal.

I dont know if you note the first line of my original Modal is:

If i remove that line from ui.bootstrap modal, my modal style have issues. If i add that line to ui.bootstrap modal, my modal window dont appear. Just show the shadow behind the "panel appeared" but nothing shows up

I hope you could understand my problem. Thanks a lot.

UPDATE 1

Pop-A-Stash · Accepted Answer

It looks like you need to add your class to the top window template of the modal. Luckily, UI Bootstrap provides the windowTopClass property, that allows you to add your class to it:

var modalInstance = $uibModal.open({
  windowTopClass: 'ql-modal',
  templateUrl : 'modalContent.html',
  controller : function($scope, $uibModalInstance, $uibModal, item){
    $scope.item = item;
  },
  resolve: {
    item: function(){
      return selectedItem;
    }
  } // empty storage
});

Also, there is no need to include the modal dialog container, or the content container:

This is already included by default in UI Bootstrap. If you look at the source code for the library, you will see the window template (https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html) already includes this container:

Also, if you want to make changes to this window tempalte, UI Bootstrap provides another property windowTemplateUrl where you can provide your own template:

var modalInstance = $uibModal.open({
  windowTopClass: 'ql-modal',
  windowTemplateUrl: 'windowTemplate.html',
  templateUrl : 'modalContent.html',
  controller : function($scope, $uibModalInstance, $uibModal, item){
    $scope.item = item;
  },
  resolve: {
    item: function(){
      return selectedItem;
    }
  } // empty storage
});

Mantain style of modal with ui.bootstrap modals

Answers (1)

Related Questions