如何使用Bootstrap 4.3在Popover中包含表单? [英] How to include a Form inside a Popover using Bootstrap 4.3?

问题描述

我正在尝试在使用Bootstrap创建的 Popover 内添加一个表单4.3，Popper.js和jQuery3.各自的最新版本.问题在于它与文本一起使用，与标签一起使用，但是一旦我使用表格，标签和输入，它就不会解析HTML.

I am trying to include a form inside a Popover, created using Bootstrap 4.3, Popper.js and jQuery 3. The latest version of each. The problem is that it works with text, it works with tags, but as soon as I use forms, labels and inputs it doesn't parse the HTML.

我在CodePen中有两个示例:

I have two examples in CodePen:

1. 通过数据属性进行的所有操作:链接
2. 通过JS:链接

1. Everything via data-attributes: link
2. Via JS: link

示例1代码

HTML:

<div class="container">
    <div class="row">
      <div class="col-12 mt-5">
        <h1>Bootstrap 4 form in popover</h1>
        <hr>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <h2 class="mt-3">
          <span
            class="editable"
            data-toggle="popover"
            data-container="body"
            data-title="Edit"
            data-content="<form>
  <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>
  <div class='form-group'>
    <label for='exampleInputPassword1'>Password</label>
    <input type='password' class='form-control' id='exampleInputPassword1' placeholder='Password'>
  </div>
  <div class='form-group form-check'>
    <input type='checkbox' class='form-check-input' id='exampleCheck1'>
    <label class='form-check-label' for='exampleCheck1'>Check me out</label>
  </div>
  <button type='submit' class='btn btn-primary'>Submit</button>
</form>">
            Modify this
          </span>
        </h2>
      </div>
    </div>
  </div>

CSS:

.editable {
  color: blue;
  border-bottom: 2px dashed blue;
}

JS:

$("h2 > .editable").popover({
  html: true
});

示例2代码

HTML:

<div class="container">
    <div class="row">
      <div class="col-12 mt-5">
        <h1>Bootstrap 4 form in popover</h1>
        <hr>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <h2 class="mt-3">
          <span
            class="editable"
            data-toggle="popover"
            data-container="body"
            data-title="Edit">
            Modify this
          </span>
        </h2>
        <div id="form-container" style="visibility: hidden">
          <form>
  <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>
  <div class='form-group'>
    <label for='exampleInputPassword1'>Password</label>
    <input type='password' class='form-control' id='exampleInputPassword1' placeholder='Password'>
  </div>
  <div class='form-group form-check'>
    <input type='checkbox' class='form-check-input' id='exampleCheck1'>
    <label class='form-check-label' for='exampleCheck1'>Check me out</label>
  </div>
  <button type='submit' class='btn btn-primary'>Submit</button>
</form>
        </div>
      </div>
    </div>
  </div>

JS:

$("h2 > .editable").popover({
  content: function() {
    return $('#form-container').html();
  },
   html: true,
  placement: 'bottom'
});

推荐答案

设置:

sanitize: false

您的弹出窗口形式有效.有关详细信息，请参见文档

your popover form works. For details see docs

$("h2 > .editable").popover({
    html: true,
    sanitize: false
});

.editable {
  color: blue;
  border-bottom: 2px dashed blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class="container">
    <div class="row">
        <div class="col-12 mt-5">
            <h1>Bootstrap 4 form in popover</h1>
            <hr>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h2 class="mt-3">
          <span
                  class="editable"
                  data-toggle="popover"
                  data-container="body"
                  data-title="Edit"
                  data-content="<form>
  <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>
  <div class='form-group'>
    <label for='exampleInputPassword1'>Password</label>
    <input type='password' class='form-control' id='exampleInputPassword1' placeholder='Password'>
  </div>
  <div class='form-group form-check'>
    <input type='checkbox' class='form-check-input' id='exampleCheck1'>
    <label class='form-check-label' for='exampleCheck1'>Check me out</label>
  </div>
  <button type='submit' class='btn btn-primary'>Submit</button>
</form>">
            Modify this
          </span>
            </h2>
        </div>
    </div>
</div>

这篇关于如何使用Bootstrap 4.3在Popover中包含表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！