Question

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

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

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

您需要将popover的元素放在模态弹出窗口中。因此必须使用“容器”属性进行弹出。

但如果您使用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();
    }
});

Answer 2

因为我不想在我正在运行的项目中用bootstrap 3替换bootstrap 4而且不可能直接用bootstrap popover完成这项工作（或者我不知道）我将继续这种方法：< / p>

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

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

2 个答案: