Twitter bootstrap 引导模式不显示

我复制并粘贴了twitter引导中的示例代码，在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>

现在不知何故是div的一部分，因此在控制台中看起来如下所示：

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

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

---

谢谢，我找到了原因

我只是想让大家对这个问题有所了解。如果您无法找出问题所在，请尝试在应用程序中的任何样式表中“全部搜索”任何“模态”、“淡入”、“淡入”和“隐藏”类

---

我在一个随机css文件中定义了一个“淡入淡出”的实例，这就是它在覆盖引导时停止显示的原因。一旦我删除了引用，一切都正常。

如果您已从Bootstrap 2.3.2升级到Bootstrap 3，则需要从任何模式div中删除“hide”类

我的

里有我的modal

。。。。不太好

室外工程罚款：-）

&时代；
....

取消
好啊

.....

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

Typescript指令：

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>

情态标题

我刚刚遇到这个问题，发现定制CSS样式表文本颜色：#ffffff正在淹没文本内容，因为模型背景颜色相同！i、 e..model content{background color:#ffffff；}确保通过添加以下内容在自定义样式表中覆盖它 .modal content{color:#6464！重要；}

---

这可能会有所帮助。

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

将此添加到angular cli：

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

---

确保你有它的文件夹。

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

---

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

e.stopPropagation（）

。

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

×
模态头
一个好身体

接近
保存更改
启动演示模式

我遇到了同样的问题，我意识到我的

有一个

type=“submit”

当引导程序声明它需要是

type=“button”

时，我遇到了与Paula相同的问题，我的模式没有显示，我意识到我的按钮有一个“

”标签…：

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

删除

我刚刚用替换了，我的model工作得很好

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

删除

以便在调用.modal（'show'）时显示我的模式

我改变了：

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

致：

---

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

检查所有js文件，应保持顺序

该秩序应维持为：

---

有时也会发生其他css冲突-

css优先级问题。

若要检查，请转到浏览器上的模式淡入淡出类，然后检查顶部是否有自定义文件。例如

.fade:not（.show）

它使用自己的信息而不是引导。如果你发现了，那么你必须根据自己的需要改变它。

---

希望这对您有所帮助。

如果您正在运行引导4，可能是因为引导css中的“.fade:not（.show）{opacity:0}”，并且您的模式没有类“show”。它没有类“show”的原因可能是您的页面没有加载jQuery、Popper和引导Javascript文件

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

---

参考资料：

我也有同样的问题

---

<强>解决方案< /强>：在主HTML的<强>最高范围< /强>中放置MODATE <强> div/<强>（由于使用<强> jja2块，我的模式嵌套在某个其他强< div 中的某个地方。

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

可能是一种非常罕见的情况，但我无法添加注释，因此将其保留在此处，以防对某人有所帮助： 我在处理其他人的代码时遇到了类似的问题，当我添加“.fade”类时，modal没有显示，问题是一些CSS。modal背景：

.modal-backdrop {display: none;}

---

删除后，模态显示良好。

从按钮类型中删除数据目标属性。然后添加onClick=“$（'#您的模态名称'）。模态（'show'）”在button标签中。我希望它能起作用，因为我遇到了同样的问题&我通过jQuery调用modal的show类解决了这个问题。

我使用的是ui-bootstrap-tpls.js，对我有用的是，我在整个项目中搜索了fade，并在提到的文件中找到了3个设置fade的位置

我查看了find结果，发现其中两个更改是在模态上完成的，另一个是在工具提示动画上设置的

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

我所做的是为uib模式添加show类来解决这个问题

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

---

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

    -> jquery.min.js
    -> bootstrap.min.js
    -> any external js files

.modal-backdrop {display: none;}

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

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