禁用表单元素：在 Modal 中嵌入的引导弹出窗口中包含表单

Question

基于this post，我尝试创建一个带有输入字段的弹出框，可以通过模式中的链接打开该框。

但由于某种原因，输入和提交按钮被禁用。有谁知道为什么以及如何解决它？

Demo

HTML：

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">
    <a href="#" id="popover">the popover link</a>
    <div id='popover-head' class='front hide'>
      Lorem Ipsum
    </div>
    <div id='popover-content' class='content hide'>
         <div class='form-group'>
                <input type='text' class='form-control' placeholder='Type something…'>
         </div>
         <button type='submit' class='btn btn-default'>Submit</button>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>
</div>
</div>

JS

$('#popover').popover({ 
html : true,
placement: 'bottom',
title: function() {
  return $("#popover-head").html();
},
content: function() {
  return $("#popover-content").html();
}
});

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Answer 1

由于我不想在我正在运行的项目中将 bootstrap 4 替换为 bootstrap 3，并且无法直接通过 bootstrap popover 完成此操作（或者我不知道），我将继续使用这种方法：

HTML

<div id="popover" class="dropdown-menu" role="menu">
<form class="col-sm-12">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <button id="submit" type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

JS

$(".popover-btn").click(function() {
  $(this).after($("#popover"));
  $(this).dropEffect();
});

Demo

Answer 2

您需要将弹出框的元素放在模态弹出框内。所以必须使用“容器”属性进行弹出窗口。

但是如果你使用 Bootstrap 3.0 那么你不需要做任何事情。

Fiddle with bootstrap3.0

使用了相同的代码。

$('#popover').popover({ 
    html : true,
    placement: 'bottom',
    title: function() {
      return $("#popover-head").html();
    },
    content: function() {
      return $("#popover-content").html();
    }
});