如何使用 Bootstrap 4.3 在 Popover 中包含一个表单?
How to include a Form inside a Popover using Bootstrap 4.3?
我试图在 Popover 中包含一个表单,使用 Bootstrap 4.3、Popper.js 和 jQuery 3 创建。每个的最新版本。问题是它适用于文本,适用于标签,但只要我使用表单、标签和输入,它就不会解析 HTML.
我在CodePen中有两个例子:
示例 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
您的弹出窗体有效。有关详细信息,请参阅 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>
我试图在 Popover 中包含一个表单,使用 Bootstrap 4.3、Popper.js 和 jQuery 3 创建。每个的最新版本。问题是它适用于文本,适用于标签,但只要我使用表单、标签和输入,它就不会解析 HTML.
我在CodePen中有两个例子:
示例 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
您的弹出窗体有效。有关详细信息,请参阅 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>