Mantain style of modal with ui.bootstrap modals - angularjs

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
<!-- ====PROTFOLIO AREA==== -->
<section id="Portfolio" class="protfolio_area section-padding" ng-controller="ModalCtrl">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="work_trigge">
<ul class="trigger mb80 text-center">
<li class="filter active" data-filter="">ALL</li>
<li class="filter" data-filter=".html">HTML</li>
<li class="filter" data-filter=".wordpress">Wordpress</li>
<li class="filter" data-filter=".ui_ux">UI/UX</li>
<li class="filter" data-filter=".print">PRINT</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div ng-repeat="item in items">
<!--First column-->
<div class="col-lg-4 col-md-12 mb-r">
<!--Card-->
<div class="card card-cascade wider">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img ng-src="{{item.thumb}}" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block text-xs-center">
<!--Category & Title-->
<h5>Shoes</h5>
<h4 class="card-title"><strong><a ng-click="ModalCtrl.showModal(item)">{{item.nombre}}</a></strong></h4>
<!--Description-->
<p class="card-text">{{item.desc_corta}}
</p>
<!--Card footer-->
<div class="card-footer">
<span class="left"><a class="" data-toggle="tooltip" data-placement="top" title="Ver más" ng-click="showModal(item)">Ver más <i class="fa fa-eye"></i></a>
</span>
<span class="right">
<a class="" data-toggle="tooltip" data-placement="top" title="Marcar como favorito"><i class="fa fa-heart"></i></a>
</span>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--/First column-->
</div>
</div>
<div class="row">
<div class="col-xs-12 trigger_bottom">
<a href="#!" class="th_bt btn waves-effect waves-light">View All
<i class="zmdi zmdi-long-arrow-right"></i>
</a>
</div>
</div>
</div>
</section>
<!-- ====END PROTFOLIO AREA==== -->
Modal triggered by javascript with no style problems
<!-- Modal -->
<div class="modal fade ql-modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Vista completa del artículo</h4>
</div>
<!--Body-->
<div class="modal-body">
MY MODAL CONTENT GOES HERE.......
</div>
<!--Footer-->
<div class="modal-footer">
<a class="btn btn-default">Ask about details</a>
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--/Modal-->
<script type="text/javascript">
$("#myModal").modal("show")
</script>
UI Bootstrap Modal.
<script type="text/ng-template" id="modalContent.html">
<!-- Modal -->
<div class="modal-dialog" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Vista completa del artículo</h4>
</div>
<!--Body-->
<div class="modal-body">
MY MODAL CONTENT GOES HERE.......
</div>
<!--Footer-->
<div class="modal-footer">
<a class="btn btn-default">Ask about details</a>
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
<!--/.Content-->
</div>
<!--/Modal-->
</script>
I dont know if you note the first line of my original Modal is:
<div class="modal fade ql-modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
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

Answer 1

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:
<div class="modal-dialog" role="document">
<div class="modal-content"></div>
</div>
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:
<div class="modal-dialog {{size ? 'modal-' + size : ''}}"><div class="modal-content" uib-modal-transclude></div></div>
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
});