Bootstrap Modal弹出，但有一个“着色"的提示框.页面且无法互动 [英] Bootstrap Modal popping up but has a "tinted" page and can't interact

问题描述

我正在使用引导程序来设置模式弹出窗口.单击一个按钮时，将打开模式对话框，但是整个页面略有着色"，并且我无法与模式进行交互(该页面实际上冻结了).你知道为什么会这样吗?这是代码:

I am using bootstrap to set up a modal popup. When a button is clicked, the modal dialog opens, but the entire page is slightly "tinted", and I can't interact with the modal (the page essentially freezes). Do you know why this would be? Here is the code:

按钮:

<a class="add-list-button-no-margin opener" id="id" data-toggle="modal" href="#myModal" style="color: white; font:14px / 14px 'DINMedium','Helvetica Neue',Helvetica,Arial,sans-serif;">Play my city</a>

模式:

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">Congratulations!</h4>
          </div>
          <div class="modal-body">
            <h4>Text in a modal</h4>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

            <h4>Popover in a modal</h4>
            <p>This <a href="#" role="button" class="btn btn-default popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>

            <h4>Tooltips in a modal</h4>
            <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>

            <hr>

            <h4>Overflowing text to show optional scrollbar</h4>
            <p>body</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>

        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

以下是包含的文件:

<link media="all" type="text/css" rel="stylesheet" href="http://crowdtest.dev:8888/assets/CSS/style.css">
<link media="all" type="text/css" rel="stylesheet" href="http://crowdtest.dev:8888/assets/CSS/jquery-ui-1.10.1.custom.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">

<link media="all" type="text/css" rel="stylesheet" href="http://crowdtest.dev:8888/assets/CSS/bootstrap.css">

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script src="http://crowdtest.dev:8888/assets/js/script.js"></script>
<script src="http://crowdtest.dev:8888/assets/js/jquery-ui-1.10.1.custom.min.js"></script>

<script src="http://crowdtest.dev:8888/assets/js/bootstrap.js"></script>

在所有尝试使用的浏览器(Chrome，Firefox，Safari)中发生

Happens in all browsers tried (Chrome, Firefox, Safari)

推荐答案

好，所以我知道了这个问题.

Ok, so I figured out the issue.

如果模式容器具有固定位置或位于具有固定位置的元素内，则会发生这种情况.

If the modal container has a fixed position or is within an element with fixed position this behavior will occur.

最简单的方法是仅移动模式div，使其位于具有特殊定位的任何元素之外.一个好地方可能就在结束body标签之前.

Easiest way is to just move the modal div so it is outside any elements with special positioning. One good place might be just before the closing body tag .

这就是我所做的，并且有效.

This is what I did, and it worked.

这篇关于Bootstrap Modal弹出，但有一个“着色"的提示框.页面且无法互动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！