twitter-bootstrap Bootstrap 模式不显示

Question

提问by jfdimark

I've copied and pasted the example code from twitter bootstrap to create a basic modal window in my Rails 3.2 app:

我已经从 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>

It's not working. It's not because of jQuery or scripts not loading because a) it doesn't need to load any js because its using data targeting and b) I've checked the console and everything is firing perfectly.

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

It's also not because I'm including both boostrap.js and bootstrap-modal.js...I've checked and I'm not.

这也不是因为我同时包含了 boostrap.js 和 bootstrap-modal.js ......我已经检查过了，我没有。

I'm at a loss. It should just work. Other bootstrap js is working fine on the site.

我不知所措。它应该可以正常工作。其他 bootstrap js 在站点上运行良好。

The only thing I can think of is it's something to do with the definition of the classes .hide and .fade - when I take them out, the modal shows up fine. When I include them, it won't show up at all.

我唯一能想到的是这与 .hide 和 .fade 类的定义有关 - 当我将它们取出时，模态显示正常。当我包含它们时，它根本不会出现。

Could jQuery UI be interfering with it?

jQuery UI 会干扰它吗？

Please ask me for any further info you might need to help me...

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

UPDATE:

更新：

So I think I see the problem, but I don't know how to fix it. When I check the console, right at the top I see that

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

element.style {
display: none;
}

is somehow now part of the div, so in the console it looks like this:

不知何故现在是 div 的一部分，所以在控制台中它看起来像这样：

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

But I don't know why it is adding it in, or where from. How can I track this down?

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

Thanks

谢谢

Answer 1

回答by jfdimark

I tracked down the reason.

我追查了原因。

Just to give it some general usefulness to anyone coming to this question. If you can't figure out what's wrong, try doing a 'search all' for any classes of 'modal' 'fade' 'fade in' and 'hide' in any style sheets in your application.

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

I had a single instance of 'fade' being defined in a random css file, and that's what was stopping it displaying as it was overriding bootstrap. Once I deleted the reference, everything was ok.

我在一个随机的 css 文件中定义了一个“淡入淡出”的实例，这就是阻止它显示的原因，因为它覆盖了引导程序。一旦我删除了参考，一切都很好。

Answer 2

回答by paul

If you've upgraded from Bootstrap 2.3.2 to Bootstrap 3 then you'll need to remove the 'hide' class from any of your modal divs.;

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

Answer 3

回答by zinmyintnaung

Just to elaborate on @jfdimark answer. It was most likely to cause due to same css class name somewhere in loaded CSS. Therefore, instead of defining modal class as "modal fade", change it to "modal fade in" then try again.

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

Answer 4

回答by ScottyB

If you're running Bootstrap 4, it may be due to ".fade:not(.show) { opacity: 0 }" in the Bootstrap css and your modal doesn't have class 'show'. And the reason it doesn't have class 'show' may be due to your page not loading jQuery, Popper, and Bootstrap Javascript files.

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

(The Bootstrap Javascript will add the class 'show' to your dialog automagically.)

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

Reference: https://getbootstrap.com/docs/4.3/getting-started/introduction/

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

Answer 5

回答by Kiran Maniya

Change you Code To something like this,

将您的代码更改为这样的东西，

<!-- 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>

and try using data-target="#ModelId" once. maybe it's the possible causing.

并尝试使用 data-target="#ModelId" 一次。也许这是可能的原因。

Second, if you have included JQuery more then one time, remove it and include it once only. It also prevents the model sometimes.

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

Answer 6

回答by Paula

I had the same issue and I realized that my <button>had a type="submit"when Bootstrap states that it needs to be type="button"

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

Answer 7

回答by Fox5150

As Paula, I had the same problem, my modal was not showing, and I realized that my button was in a '< form >' tag ... :

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

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

I just replaced < button > by < a >, and my modal worked well

我刚刚用 <a> 替换了 <button>，我的模态运行良好

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

Answer 8

回答by JanBorup

I had my modal < div > inside my < li >.... not good.

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

Outside works fine :-)

外面工作正常:-)

<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>

Answer 9

回答by John Dover

If you are using angular and trying to create a directive that has a custom modal in it, the modal backdrop will show but the modal itself will not unless you set replace: true on your directive.

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

Typescript Directive:

打字稿指令：

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 () {
    }
}

Modal HTML

模态 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>

Answer 10

回答by Onshop

In order to get my modal to display when calling .modal('show')

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

I changed:

我变了：

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

to:

到：

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

twitter-bootstrap Bootstrap 模式不显示

提问by jfdimark

回答by jfdimark

回答by paul

回答by zinmyintnaung

回答by ScottyB

回答by Kiran Maniya

回答by Paula

回答by Fox5150

回答by JanBorup

回答by John Dover

回答by Onshop

相关推荐

最近更新

标签

twitter-bootstrap Bootstrap 模式不显示

提问by jfdimark

回答by jfdimark

回答by paul

回答by zinmyintnaung

回答by ScottyB

回答by Kiran Maniya

回答by Paula

回答by Fox5150

回答by JanBorup

回答by John Dover

回答by Onshop

相关推荐

twitter-bootstrap 滚动 div 后，如何将引导程序导航栏固定到顶部？

twitter-bootstrap 带有 Bootstrap 网格的全高列背景颜色

twitter-bootstrap Twitter Bootstrap - 如何根据@media 定义的宽度更改 css 类

如何使用 Twig 模板和 Twitter-Bootstrap 创建模态窗口

相关推荐

最近更新

标签