使用 ui.bootstrap 模态保持模态的风格

Question

我正在使用 Bootstrap 模式来显示所选项目的详细信息。我有一段我想要显示的模态 window。如果我将它用作模态模板，我会遇到样式问题。但是如果我触发模态 window 作为普通模态，而不是 ui.bootstrap ，一切正常。这是我的文件：

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

使用模式查看

<!-- ====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-->
                                        <a href="" class="text-muted" data-toggle="modal" data-target="#myModal"><h5>Shoes</h5></a>
                                        <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==== -->

模式由 javascript 触发，没有样式问题

<!-- 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">&times;</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 模态.

<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">&times;</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>

不知道大家有没有注意到我原来的Modal第一行是：

<div class="modal fade ql-modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

如果我从 ui.bootstrap 模态中删除该行，我的模态样式就会有问题。如果我将该行添加到 ui.bootstrap 模态，我的模态 window 不会出现。只显示 "panel appeared" 后面的阴影，但什么也没有显示

希望您能理解我的问题。非常感谢。

更新 1

Answer 1

您似乎需要将 class 添加到模态框的顶部 window 模板。幸运的是，UI Bootstrap 提供了 windowTopClass 属性，允许您将 class 添加到其中：

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

此外，无需包含模态对话框容器或内容容器：

<div class="modal-dialog" role="document">
  <div class="modal-content"></div>
</div>

这已默认包含在 UI Bootstrap 中。如果您查看库的源代码，您会看到 window 模板 (https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html) 已经包含此容器：

<div class="modal-dialog {{size ? 'modal-' + size : ''}}"><div class="modal-content" uib-modal-transclude></div></div>

此外，如果您想更改此 window 模板，UI Bootstrap 提供了另一个属性 windowTemplateUrl，您可以在其中提供自己的模板模板：

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

使用 ui.bootstrap 模态保持模态的风格

Mantain style of modal with ui.bootstrap modals

modal-dialog

twitter-bootstrap

angularjs

angular-ui-bootstrap