Bootstrap 模态出现在背景下-前端问题

Bootstrap modal appearing under background(Bootstrap 模态出现在背景下)

本文介绍了Bootstrap 模态出现在背景下的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我直接使用了来自 Bootstrap 示例的模态代码，并且只包含了 bootstrap.js(而不是 bootstrap-modal.js).但是，我的模态显示在灰色渐变(背景)下方并且不可编辑.

I have used the code for my modal straight from the Bootstrap example, and have included only the bootstrap.js (and not bootstrap-modal.js). However, my modal is appearing underneath the grey fade (backdrop) and is non editable.

它是这样的:

请参阅 this fiddle 了解一种重现此问题的方法.该代码的基本结构如下:

See this fiddle for one way to reproduce this problem. The basic structure of that code is like this:

<body>
    <p>Lorem ipsum dolor sit amet.</p>    

    <div class="my-module">
        This container contains the modal code.
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">Modal</div>
                </div>
            </div>
        </div>
    </div>
</body>

body {
    padding-top: 50px;
}

.my-module {
    position: fixed;
    top: 0;
    left: 0;
}

任何想法为什么会这样或者我可以做些什么来解决这个问题?

Any ideas why this is or what I can do to fix this?

推荐答案

另外，确保BootStrap css和js的版本相同.不同的版本也可以让modal出现在后台:

Also, make sure that version of BootStrap css and js are the same ones. Different versions can also make modal appearing under background:

例如:

不好:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="aHR0cHM6Ly9tYXhjZG4uYm9vdHN0cmFwY2RuLmNvbS9ib290c3RyYXAvMy4zLjAvanMvYm9vdHN0cmFwLm1pbi5qcw=="></script>

好:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="aHR0cHM6Ly9tYXhjZG4uYm9vdHN0cmFwY2RuLmNvbS9ib290c3RyYXAvMy4zLjEvanMvYm9vdHN0cmFwLm1pbi5qcw=="></script>

这篇关于Bootstrap 模态出现在背景下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！