Bootstrap 模式出现在背景下 [英] Bootstrap modal appearing under background

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

问题描述

我直接从 Bootstrap 示例中使用了我的模态代码，并且只包含了 bootstrap.js(而不是 bootstrap-modal.js).但是，我的模态出现在灰色淡入淡出(背景)下方并且不可编辑.

这是它的样子:

请参阅this fiddle以一种重现此问题的方法.这段代码的基本结构是这样的:

<p>Lorem ipsum dolor sat amet.</p><div class="my-module">此容器包含模式代码.<div class="模态淡入淡出"><div class="modal-dialog"><div class="modal-content"><div class="modal-body">Modal</div>

body {填充顶部:50px；}.我的模块{位置:固定；顶部:0；左:0；}

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

解决方案

另外，请确保 BootStrap css 和 js 的版本是相同的.不同的版本也可以使模态出现在背景下:

例如:

不好:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

好:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

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.

Here's what it looks like:

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?

解决方案

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

For example:

Bad:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

Good:

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

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆