带有 ui.bootstrap 模态的 Mantain 模态风格答案

【问题标题】：Mantain style of modal with ui.bootstrap modals带有 ui.bootstrap 模态的 Mantain 模态风格
【发布时间】：2017-01-20 11:22:55
【问题描述】：

我正在使用 Bootstrap 模式来显示所选项目的详细信息。我有一个要显示的模态窗口的 sn-p。如果我将它用作模态模板，我会遇到样式问题。但是，如果我将模态窗口作为普通模态而不是 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 引导模式。

<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 模态，我的模态窗口不会出现。只显示“面板出现”后面的阴影，但没有任何显示

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

更新 1

【问题讨论】：

标签： angularjs twitter-bootstrap modal-dialog angular-ui-bootstrap

【解决方案1】：

看起来您需要将您的类添加到模式的顶部窗口模板中。幸运的是，UI Bootstrap 提供了 windowTopClass 属性，允许您向其中添加类：

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 中。如果您查看该库的源代码，您会看到窗口模板 (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>

另外，如果您想更改此窗口模板，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
});

【讨论】：

非常感谢您的回答，我按照您所说的做了，并且有效。但是现在，我在这里遇到了最后一个问题，就像模态在模态内容后面显示了一个白色容器。 ——我在主帖上附上了一张图片。 :)
不要在模板中包含 <div class="modal-dialog" role="document"> 或 modal-content 容器。这已经被 UI Bootstrap 插入了
非常感谢。现在一切正常。你救了我。 :D