使用小型 Bootstrap 模态的超大背景模态答案

【问题标题】：Extra large background modal using small Bootstrap modal使用小型 Bootstrap 模态的超大背景模态
【发布时间】：2016-09-04 09:06:18
【问题描述】：

我在使用 Bootstrap 模态时遇到问题，如果我将大小更改为小，则它后面会有一个挥之不去的背景模态，但它仍然很大。

在元素窗口中，我可以在 uib-modal-transclude 之前删除 class="modal-content" 并且后面的模态消失。但是，我正在尝试在我的代码中应用此更改，但无法使其正常工作。

首先，此代码似乎来自uib/template/modal/window.html 或https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html

我正在使用 ui_bootstrap/1.1.2

我尝试使用 windowtemplateurl 覆盖模板并使新模板具有：

  <div modal-render="true" tabindex="-1" role="dialog" class="modal fade ng-isolate-scope in"
     uib-modal-animation-class="fade" modal-in-class="in" ng-style="{'z-index': 1050 + index*10, display: 'block'}"
     uib-modal-window="modal-window" size="sm" index="0" animate="animate" modal-animation="true"
     style="z-index: 1050; display: block;">
        <div uib-modal-transclude=""><!--

            <!-- Modal -->
            <div class="modal-dialog modal-sm">
                <div class="modal-content modal-sm">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" ng-click="Cancel()"><span
                                aria-hidden="true">×</span>
                            <span class="sr-only">Close</span>
                        </button>
                        <h4 class="modal-title ng-binding" id="notfound"> Not Found</h4>
                    </div>
                    <div class="modal-body">
                        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="Cancel()">Close
                        </button>
                        <button type="button" class="btn btn-primary">Add New</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这不起作用。更改 windowTemplateUrl 似乎根本没有改变任何东西...我也尝试将 css 添加到 modal-content 中，但是这会破坏此页面上的其他模式。

我在正确的轨道上吗？这个错误来自哪里？修复它的最佳方法是什么？

【问题讨论】：

您在模态对话框中使用了“modal-xl”类。将其更改为“modal-sm”。
@RachelS 是的，我也看到了，但又是在 window.html 代码中，我的覆盖不起作用。
@RachelS 我将 modal-xl 更改为 modal-sm 以及其上方的 size="sm" 并且在背景中仍然有一个模态，尽管它更小。周围的模态是 300x184 而我的模态是 300x122

标签： javascript css angularjs twitter-bootstrap bootstrap-modal

【解决方案1】：

万一其他人有这个错误，这是我所做的修复它。

我确实在我的代码中找到了模态大小的声明为“xl”。将其更改为“sm”，我的模态框周围仍然有一个 300x184 的包装器，而我的模态框是 300x122。

我取出class="modal-dialog" div 包装器，第二个模态消失了。

【讨论】：