Bootstrap模式不显示

时间：2013-04-18 21:40:13

标签： twitter-bootstrap modal-dialog

我已经从twitter bootstrap中复制并粘贴了示例代码，以便在我的Rails 3.2应用程序中创建一个基本的模态窗口：

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

<a href= "#myModal"  role="button" class="btn" data-toggle="modal">Launch demo modal</a>

它不起作用。这不是因为jQuery或脚本没有加载因为a）它不需要加载任何js，因为它使用数据定位和b）我已经检查了控制台，一切都完美无缺。

这也不是因为我包括了boostrap.js和bootstrap-modal.js ......我已经检查过了，我不是。

我很茫然。它应该工作。其他bootstrap js在网站上工作正常。

我唯一能想到的是它与类的定义有关.hide和.fade - 当我把它们拿出来时，模态显示得很好。当我包含它们时，它根本不会出现。

jQuery UI会干扰它吗？

请向我询问您可能需要的任何进一步信息......

更新：

所以我认为我看到了问题，但我不知道如何解决它。当我检查控制台时，在顶部我看到了

element.style {
display: none;
}

现在某种程度上是div的一部分，所以在控制台中看起来像这样：

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;" >

但我不知道为什么要添加它，或者从哪里添加它。我该如何追踪这个？

由于

23 个答案:

答案 0 :(得分：49)

如果你已经从Bootstrap 2.3.2升级到Bootstrap 3，那么你需要从你的任何模态div中删除'hide'类。;

答案 1 :(得分：43)

我找到了原因。

只是为了对这个问题的任何人提供一些普遍的用处。如果你无法弄清楚什么是错的，试着在你的应用程序的任何样式表中对'modal''淡入淡出'淡入'和'隐藏'进行'搜索全部'。

我在一个随机的css文件中定义了一个'fade'实例，这就是它在覆盖bootstrap时停止显示的内容。删除引用后，一切正常。

答案 2 :(得分：3)

将您的代码更改为类似的内容， 

<!-- Modal -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

<a class="btn" data-target="#myModel" role="button" data-toggle="modal">Launch demo modal</a>

并尝试一次使用data-target =“＃ModelId”。也许是可能的原因。

第二，如果您多次包含JQuery，请将其删除并仅包含一次。有时也会阻止模型。

答案 3 :(得分：1)

我的模态＆lt; div>在我的内部＆lt; li＆gt; ....不好。

外部工作正常： - ）

<div class="modal fade" id="confirm-logout" tabindex="-1" role="dialog" aria-labelledby="logoutLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">....</h4>
            </div>

            <div class="modal-body">
                <p>....</p>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <a class="btn btn-danger btn-ok">OK</a>
            </div>
        </div>
    </div>
</div>
<li>
    .....
</li>

答案 4 :(得分：1)

如果您正在使用angular并尝试创建一个包含自定义模式的指令，则模态背景将显示，但除非您在指令上设置replace：true，否则模态本身不会显示。

打字稿指令：

export class myModalDirective implements ng.IDirective {
    static Register = () => {
        angular.module('app').directive('myModal', () => { return new myModalDirective () });
    }
    templateUrl = 'mymodal.html'    
restrict = 'E';
    replace = true;
    scope = {
        show: '='
    }
    link = (scope: any, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ctrl: any) => {
        var vm = this;
        scope.$watch(function () { return scope.show; }, function (vis) {
            if (vis) {
                $(element).modal('show');
            } else {
                $(element).modal('hide');
            }
        });

    }
    constructor () {
    }
}

模态HTML 

<div class="modal fade" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Modal Title</h4>
                </div>
                <div class="modal-body">
                </div>
        </div>
    </div>
</div>

答案 5 :(得分：1)

我遇到了同样的问题，当Bootstrap指出type="submit"必须为type="button"时，我才意识到$emit

答案 6 :(得分：1)

像Paula一样，我遇到了同样的问题，我的模式没有显示，我意识到我的按钮是'

'标签...：

<button class="btn btn-danger" data-toggle="modal" data-target="#deleteItemModal">Delete</button>

我只是将

答案 7 :(得分：1)

也许是一种非常罕见的情况，但是我无法添加评论，因此请留在此处，以防它对某人有所帮助： 我在处理其他人的代码时遇到类似的问题，当我添加“ .fade”类时，模态未显示，问题是.modal-backdrop的一些CSS：

flow-typed install

删除该模式后显示正常。

答案 8 :(得分：1)

如果您使用自定义CSS而不是将模式类定义为“模式淡入”或“模式淡入”，请在HTML页面中将其更改为仅“模式淡入”，然后重试。

答案 9 :(得分：1)

我有同样的问题。

解决方案：我将模式的 DIV 放入了主HTML的 最大范围 （由于使用了 Jinja2 阻止了我的模态嵌套在其他 DIV 中间的某个位置。

答案 10 :(得分：1)

如果您正在运行Bootstrap 4，则可能是由于Bootstrap css中的“ .fade：not（.show）{opacity：0}”而导致，而您的模态没有类“ show”。它之所以没有类“ show”的原因可能是由于您的页面未加载jQuery，Popper和Bootstrap Javascript文件。

（Bootstrap Javascript将自动将“ show”类添加到对话框中。）

参考：https://getbootstrap.com/docs/4.3/getting-started/introduction/

答案 11 :(得分：0)

我之前的代码也遇到过这个问题，我修复它的方法实际上是获得更新版本的 Bootstrap。我之前从一个 React 应用程序变成了一个完整的 JS/EJS/Node 应用程序，并且我有一个旧版本的引导程序（它是 4.0）。我今天升级到 v5.0 并更改了对我有用的引导 css/js 链接。我希望它对你有用！

答案 12 :(得分：0)

请

1. 折叠所有 ># VsCode 并验证您现在已关闭，再次验证其他和其他您可以使用该建议为我最近提供的可转换性复制并粘贴其他引导程序模板的模态，这是非常危险的，因为您不知道是否已正确关闭，或者您是否仍在使用其他陌生人页面的引导程序模板最初仅在设计者的原因上有错误将其上传到“免费”页面的学生...使用 Bootstrap 免费模板风险自负。

2. 验证模态的顺序（模态淡入淡出、模态对话框、模态内容、（模态标题、模态正文、模态页脚））。

3. 验证方法 modal show 是否像这样正确地扭动：$('#myModal').modal('show') ....警告!!....注意这个例子是区分大小写的。

4. 验证您的模态是否正确扭曲，如下所示： div class="modalfade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="ModalVerLabel" aria-hidden="true"....WARNING!!.... 注意此示例区分大小写 ....并且没有 # 指示符。

5 验证 id modal 和 aria-labelledby 在我的情况下是唯一的>区分大小写 ....并且没有#指示器

答案 13 :(得分：0)

把你的模态放在标签之后是个好主意，这样你就可以确定没有父元素样式影响它 - 在我的例子中模态被隐藏，因为父 div 被隐藏了。

答案 14 :(得分：0)

我正在使用 ui-bootstrap-tpls.js，对我有用的是我在整个项目中搜索了淡入淡出并找到了在提到的文件中设置的 3 个地方。

我查看了查找结果，发现其中 2 个更改是在模态上完成的，另一个是在工具提示动画上设置的。注意下面代码的区别

'uib-modal-animation-class': 'fade'
'tooltip-animation-class="fade"'

我为解决这个问题所做的是为 uib-modal 添加 show 类

'uib-modal-animation-class': 'fade show'

答案 15 :(得分：0)

有时还会有其他CSS冲突-CSS priority issue.

要检查，请在浏览器上转到模态淡入淡出类，然后检查顶部是否有任何自定义文件。例如.fade:not(.show)，它使用自己的信息而不是引导程序。如果找到，则必须根据需要进行更改。 希望这会有所帮助。

答案 16 :(得分：0)

  1. 检查所有js文件，应保持顺序。
  2. 订单应保持为
    -> jquery.min.js
    -> bootstrap.min.js
    -> any external js files

答案 17 :(得分：0)

仅详细说明@jfdimark答案。这最有可能是由于已加载CSS中某处的CSS类名称相同而引起的。因此，不要将模式类定义为“模式淡入”，而是将其更改为“模式淡入”，然后重试。

答案 18 :(得分：0)

为了在调用.modal（'show'）时显示我的模态

我更改了：

modal.on('loaded.bs.modal', function()

收件人：

modal.on('shown.bs.modal', function() {

答案 19 :(得分：0)

遇到这种情况后，我惊讶地发现这些解决方案都不起作用，因为它看起来相当直接，而且我在不同的页面上有类似的标记。

通过我的配置，我将现有的jQuery代码绑定到触发模式的相同选择器。一旦开始消除过程，我所要做的就是在现有脚本中注释/删除e.stopPropagation()。

答案 20 :(得分：-1)

从按钮类型中删除数据目标属性。然后在按钮标记中添加onClick =“ $（'＃your_modal_name'）。modal（'show'）”。我希望它能在遇到相同问题时起作用，并通过jQuery调用模式的show类来解决此问题。

答案 21 :(得分：-4)

您应该导入jquery和bootstrap.min.js。

将此添加到angular-cli：

"scripts": ["../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"]

确保您有自己的文件夹。

答案 22 :(得分：-4)

我刚遇到这个问题，发现自定义CSS样式表文本颜色：#ffffff正在淹没文本内容，因为模型背景颜色相同！即.model-content {background-color：#ffffff;}请务必通过添加以下内容在自定义样式表中覆盖它 .modal-content {color：＃646464！important;}
可能会有所帮助。

相关问题
最新问题