52

我从 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…&lt;/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 ......我已经检查过，但我没有。

我不知所措。它应该可以工作。其他引导 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;" >

但我不知道为什么要添加它，或者从哪里添加它。我怎样才能找到这个？

谢谢

4

27 回答 27

77

我追查了原因。

只是为了给任何提出这个问题的人一些普遍的用处。如果您无法找出问题所在，请尝试在您的应用程序的任何样式表中对任何“模式”、“淡入”、“淡入”和“隐藏”类进行“搜索全部”。

我在一个随机的css文件中定义了一个'fade'的单个实例，这就是阻止它显示的原因，因为它覆盖了引导程序。删除引用后，一切正常。

于 2013-04-19T01:01:25.603 回答
52

如果您已从 Bootstrap 2.3.2 升级到 Bootstrap 3，那么您需要从任何模态 div 中删除“隐藏”类。

于 2014-01-30T15:52:49.903 回答
8

如果您正在运行 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/

于 2019-09-24T18:09:06.733 回答
4

把你的代码改成这样的， 

<!-- 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…&lt;/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，请将其删除并仅包含一次。它有时也会阻止模型。

于 2018-09-27T10:34:12.480 回答
4

只是为了详细说明@jfdimark 的答案。这很可能是由于加载的 CSS 中某处的相同 css 类名引起的。因此，不要将模态类定义为“模态淡入淡出”，而是将其更改为“模态淡入淡出”，然后再试一次。

于 2019-06-06T02:39:53.400 回答
4

我有同样的问题。对我来说，原因是在启动按钮中使用了带有过时 data-toogle 和 data-target 属性的 Bootstrap 5：

修正后

<button type="button" class="btn" data-toggle="modal" data-target="#myModal" >

到

<button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#myModal">

它运行正确。

于 2022-02-08T17:01:06.963 回答
3

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

.modal-backdrop {display: none;}

删除后，模态显示正常。

于 2020-09-23T07:19:46.770 回答
2

我有同样的问题，我意识到我<button>有一个type="submit"当 Bootstrap 声明它需要type="button"

于 2018-11-08T02:04:21.637 回答
2

作为 Paula，我遇到了同样的问题，我的模式没有显示，我意识到我的按钮在一个 '< form >' 标签中......：

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

我刚刚将 <button> 替换为 <a>，并且我的模态运行良好

<a class="btn btn-danger" data-toggle="modal" data-target="#deleteItemModal">Delete</a>
于 2018-11-25T13:23:33.153 回答
2

如果您使用自定义 CSS 而不是将模态类定义为“模态淡入”或“模态淡入”，请将其更改为 HTML 页面中的“模态”，然后再试一次。

于 2020-03-02T17:54:47.827 回答
1

我的 < li > 中有我的模态 < div >.... 不好。

外面工作正常:-)

<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>
于 2015-11-18T10:37:36.650 回答
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>
于 2016-04-06T14:31:12.530 回答
1

我有同样的问题。

解决方案：我将模态的DIV放在主 HTML 的最上层范围内（由于使用Jinja2 块，我的模态嵌套在其他一些DIV中间的某个地方。

于 2020-01-28T16:07:22.430 回答
1

请

1.折叠你所有的 ># VsCode 并验证你现在已经关闭，再次验证其他和其他你可以使用提议的内容来为我最近复制和粘贴其他引导模板的模式和它非常危险，因为您不知道是否已正确关闭，或者您是否仍在使用其他陌生页面的引导模板最初仅在设计师学生将其上传到“免费”页面时出现错误...使用 Bootstrap 免费模板需要您自担风险。

2.验证模态的顺序（modal fade,modal-dialog,modal-content,(modal-header,modal-body,modal-footer)）。

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

4. 验证您的模态是否像这样正确旋转：div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="ModalVerLabel" aria-hidden="true"。 ...警告!!!....请注意，此示例区分大小写....并且没有 # 指示符。

5 验证 id modal 和 aria-labelledby 在我的情况下是唯一的-SENSITIVE ....并且没有#指示符

于 2021-05-09T03:52:39.977 回答
1

版本不匹配可能会导致此问题。

我今天遇到了这个问题，最终是由不同版本的 bootstrap.css 和 bootstrap.js 引起的。CSS 文件是 3.7，JS 是 5.1，一旦我更新到 CSS 5.1，一切都到位了。

于 2022-01-06T01:03:16.020 回答
0

遇到这个问题后，我惊讶地发现这些解决方案都不起作用，因为它看起来相当简单，而且我在不同的页面上也有类似的标记。

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

于 2018-03-21T01:49:42.100 回答
0

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

我变了：

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

到：

modal.on('shown.bs.modal', function() {
于 2019-01-31T22:38:58.440 回答
0
  1. 检查所有js文件，应该保持顺序。
  2. 该顺序应保持为
    -> jquery.min.js
    -> bootstrap.min.js
    -> any external js files
于 2019-06-15T13:26:21.683 回答
0

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

要检查，请转到浏览器上的模态渐变类，然后检查是否有任何自定义文件出现在顶部。例如.fade:not(.show)它使用自己的信息而不是引导程序。如果你找到了，那么你必须根据你的需要改变它。希望这可以帮助。

于 2019-06-30T21:20:26.177 回答
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'
于 2021-02-10T22:02:35.097 回答
0

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

于 2021-02-21T15:30:40.900 回答
0

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

于 2021-05-29T01:23:07.767 回答
0

可能不是100%相关。但是由于我在故障排除过程中多次遇到此线程，所以我认为我可以分享我的结果。

当我单击“显示模态”按钮时，背景变得模糊，但没有显示模态。同样在我发现在某些屏幕尺寸下模态不会显示之前。

我的故障排除结果是模态的父级具有以下 css：

@media (min-width: 768px)
.d-md-none {
    display: none !important;
}

当禁用 display-none 时，模态出现了 :) 所以我解决它的方法是将模态移动到另一个 css 没有对其施展魔法的地方。

于 2022-01-28T07:26:31.653 回答
0

确保你<div class="modal-dialog">有<div class="modal fade">

于 2022-02-22T17:09:18.847 回答
-1

从按钮类型中删除 data-target 属性。然后在按钮标签中添加 onClick="$('#your_modal_name').modal('show')" 。我希望它会在我遇到同样的问题时起作用，我通过 jQuery 调用显示模式的类来解决这个问题。

于 2020-11-14T08:04:41.740 回答
-4

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

于 2017-09-17T14:55:18.890 回答
-4

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

将此添加到 angular-cli：

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

确保你有它的文件夹。

于 2018-02-01T13:37:02.700 回答