Bootstrap 4.2 - 模态 - 输入字段不可编辑，按钮不可点击，不可关闭答案

【问题标题】：Bootstrap 4.2 - Modal - Input fields not editable, button not clickable, not closingBootstrap 4.2 - 模态 - 输入字段不可编辑，按钮不可点击，不可关闭
【发布时间】：2019-11-06 07:10:25
【问题描述】：

我通过链接打开了 bootstrap 4.2.1 模式：

<a href="#" data-toggle="modal" data-target="#inviteByEmailPopup" data-backdrop="false" data-keyboard="false">Add by Email</a>

模态 div 在末尾，就在结束 body 标记处

<div class="modal fade" tabindex="-1" role="dialog" id="inviteByEmailPopup"  aria-hidden="true" >
    <div class="modal-dialog" role="document" data-backdrop="false">
        <div class="card bg-transparent border-white mt-5">
            <div class="card-header brand-gradient border-white">
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="text-white text-uppercase">Invite By Email</h5>

            </div>
            <div class="card-body p-3 pb-5 bg-brand-grey">

                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="text-white col-md-12" for="usern1">Name</label>
                            <div class="col-md-12">
                                <input id="inviteName" class="name-input form-control" type="text"  >
                            </div>
                        </div>
                    </div>
                      ~~~ Truncated for brevity only one input kept for example ~~~~
                </div>
            </div>
        </div>
    </div>
</div>

我试过了：

移动模式以避免任何“固定”内容覆盖。
使用 z-index，将 modal 设置为比背景更高的 z-index。
我遵循了这个指南：(https://weblog.west-wind.com/posts/2016/sep/14/bootstrap-modal-dialog-showing-under-modal-background) 即使它是从 2016 年开始的
我在主 CSS 中使用 data-backdrop="false" 禁用了背景。

.modal-backdrop {
    /* bug fix - no overlay */
    display: none;
}

我为 Chrome 安装了 z-index 插件来调试这个问题。 Z 索引是正确的。
我已探查了整个堆栈溢出情况，并在此处尝试了所有已接受和未接受的答案。这不是我使用 Bootstrap 并且非常精通 css/html 的第一天。这让我发疯了。

【问题讨论】：

你有小提琴的例子吗？
你为什么将卡片类用于模态？我查看了引导文档中的一些示例，但没有一个使用卡片类。
@Vins，这些只是样式化的主题类。删除它们没有任何效果。原始开发者创建了这些样式。
你能看看指针事件属性是否已经被改变了吗？它可能不在模态本身上，有时它在背景元素上，模态继承它
@Vins 我开始怀疑引导模式不起作用，除非它具有 modal-content 类......因为默认情况下，引导示例中的普通旧模式有效。我刚刚将模态内容 div 添加到我原来的盒子中，它就起作用了。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

您必须将 modal-content 类添加到您的模态：

通过电子邮件添加

<div class="modal fade" role="dialog" id="inviteByEmailPopup">
  <div class="modal-dialog">
    <div class="modal-content"  style="background-color: #404041;" >
      <div class="modal-header brand-gradient border-white">
        <div class="brand-gradient border-white">
          <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h5 class="text-white text-uppercase">Invite By Email</h5>
        </div>
      </div>
      <div class="card-body p-3 pb-5 bg-brand-grey">

        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label class="text-white col-md-12" for="usern1">Name</label>
              <div class="col-md-12">
                <input id="inviteName" class="name-input form-control" type="text"  >
              </div>
            </div>
          </div>
          ~~~ Truncated for brevity only one input kept for example ~~~~
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

谢谢。有同样的问题，并通过我能想到的每个 z-index 和定位错误进行高低搜索。这解决了问题。

【解决方案2】：

感谢 cmets，此问题已在故障排除过程中得到解决。

首先，Bootstrap 模态，要求您在模态中使用 <div class="modal-content">...</div> 来包装您的内容。没有它，z-index 和焦点就会完全失控。

感谢您的帮助。

【讨论】：

嗨@TrueStory 你能告诉我modal-content css 类有什么特别之处吗？这将有助于进一步调试原因