Question

我遇到了Bootstrap模式的问题，如果我将大小更改为小，那么背后的背景模式仍然很大。

在Elements窗口中，我可以在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添加到模态内容，但是这会搞砸这个页面上的其他模态。

我是否在正确的轨道上？这个错误来自哪里？解决问题的最佳方法是什么？

Answer 1

如果有其他人有此错误，我会采取以下措施来解决此问题。

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

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

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

1 个答案: