我已经直接从Bootstrap示例中使用了我的模态代码,并且只包括Bootstrap .js(而不是Bootstrap -modal.js)。但是,我的模态出现在灰色渐隐(背景)下面,是不可编辑的。

这是它的样子:

这是重现这个问题的一种方法。该代码的基本结构是这样的:

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

你知道为什么会这样吗或者我能做些什么来弥补吗?


当前回答

在附加到主体时要小心!

这肯定会从背景后面得到那个模态:

$('#myModal').appendTo("body").modal('show');

然而,这将在每次打开主体时添加另一个模态,这可能会导致在更新面板中添加具有编辑和更新的网格视图等控件到模态时头痛。因此,你可以考虑在模式关闭时删除它:

例如:

$(document).on('hidden.bs.modal', function () {
        $('.modal').remove();
    });

将删除添加的模态。(当然,这是一个例子,你可能想要使用另一个你添加到模态的类名)。

正如其他人已经说过的;你可以简单地从模式中关闭back-drop (data- background ="false"),或者如果你不能没有屏幕变暗,你可以调整.modal- backstage CSS类(或者增加z-index)。

其他回答

这招对我很管用:

sass: 
  .modal-backdrop
    display: none
  #yourModal.modal.fade.in
    background: rgba(0, 0, 0, 0.5)

我有这个问题,最简单的解决方法是在modal-dialog div上添加z-index大于1040:

<div class="modal-dialog" style="z-index: 1100;">

我相信bootstrap创建了一个div模态背景淡出,在我的情况下,z指数为1040,所以如果你把模态对话框放在上面,它应该不再是灰色的。

将不透明度设为1

.modal{
opacity:1;    
}

在我的情况下,我有一个包装与以下:

.wrapper { margin: 0 auto; position:relative; z-index:1;overflow:hidden;}

只删除了z-index:1,不知道为什么要修复这个问题。当然也可以移除相对位置,但我需要它。

根据之前的答案,这可能有几个原因。 对我来说,问题是在不知情的情况下引用两个不同的Bootstrap链接,所以删除一个就解决了问题。

在我的例子中,我包括了这个:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
      integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

还有一个离线的,我的笔记本电脑里已经有了。