Javascript Bootstrap 4.2-模式-输入字段不可编辑、按钮不可单击、不关闭

我有引导4.2.1模式通过链接打开：

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

我为Chrome安装了z-index插件来调试这个问题。Z索引是正确的。 我已经搜索了整个堆栈溢出，并在这里尝试了所有被接受和不被接受的答案。这不是我第一天使用Bootstrap，并且非常精通css/html。这快把我逼疯了。

---

由于这些评论，这一问题已在故障排除过程中得到解决

首先，引导模式，要求您具有。。。在你的模态中包装你的内容。如果没有它，z索引和焦点都会出问题

---

感谢您的帮助。

由于这些评论，在故障排除过程中，此问题已得到解决

首先，引导模式，要求您具有。。。在你的模态中包装你的内容。如果没有它，z索引和焦点都会出问题

---

感谢您的帮助。

您必须将模态内容类添加到模态中：

通过电子邮件添加

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

---

您必须将模态内容类添加到模态中：

通过电子邮件添加

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

---

你有一个小提琴的例子吗？为什么你要用卡片类作为一个模型呢？我在bootstrap文档中查看了一些示例，但没有一个使用card类。@Vins，这些只是样式化的主题类。移除它们没有任何效果。最初的开发人员创建了这些样式。您能看到指针事件属性是否已经被更改了吗？它可能不在模态本身上，有时它在背景元素上，模态继承it@Vins我开始怀疑引导模式不起作用，除非它有模式内容类。。。。因为，默认情况下，引导示例中的普通旧模式有效。我刚刚在我的原始框中添加了modal content div，它起了作用。你有小提琴的例子吗？你为什么要使用卡片类来创建modal？我在bootstrap文档中查看了一些示例，但没有一个使用card类。@Vins，这些只是样式化的主题类。移除它们没有任何效果。最初的开发人员创建了这些样式。您能看到指针事件属性是否已经被更改了吗？它可能不在模态本身上，有时它在背景元素上，模态继承it@Vins我开始怀疑引导模式不起作用，除非它有模式内容类。。。。因为，默认情况下，引导示例中的普通旧模式有效。我刚刚在我的原始框中添加了modal content div，它成功了。谢谢。我也有同样的问题，在我能想到的每个z索引和定位错误中进行上下搜索。这就解决了问题，谢谢。我也有同样的问题，在我能想到的每个z索引和定位错误中进行上下搜索。这就解决了问题。

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