Javascript 在引导弹出窗口中包含表单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12128425/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Contain form within a bootstrap popover?
提问by user1438003
<div class="container">
<div class="row" style="padding-top: 240px;">
<a href="#" class="btn btn-large btn-primary" rel="popover"
data-content="<form><input type="text"/></form>"
data-placement="top" data-original-title="Fill in form">Open form</a>
</div>
</div>
I'm guessing that I would store the form contents within a javascript function...
我猜我会将表单内容存储在 javascript 函数中...
How do I contain a form within a bootstrap popover?
如何在引导弹出窗口中包含表单？
采纳答案by AdityaParab
Either replace double quotes around type="text"with single quotes, Like
要么type="text"用单引号替换双引号，就像
"<form><input type='text'/></form>"
OR
或者
replace double quotes wrapping data-contentwith singe quotes, Like
data-content用单引号替换双引号包裹，喜欢
data-content='<form><input type="text"/></form>'
回答by HaNdTriX
I would put my form into the markup and not into some data tag. This is how it could work:
我会将我的表单放入标记中，而不是放入某些数据标签中。这是它的工作方式：
JS Code:
JS代码：
$('#popover').popover({
html : true,
title: function() {
return $("#popover-head").html();
},
content: function() {
return $("#popover-content").html();
}
});
HTML Markup:
HTML 标记：
<a href="#" id="popover">the popover link</a>
<div id="popover-head" class="hide">
some title
</div>
<div id="popover-content" class="hide">
<!-- MyForm -->
</div>
Alternative Approaches:
替代方法：
X-Editable
X-可编辑
You might want to take a look at X-Editable. A library that allows you to create editable elements on your page based on popovers.
您可能想看看X-Editable。一个允许您基于弹出框在页面上创建可编辑元素的库。
Webcomponents
网络组件
Mike Costello has released Bootstrap Web Components. This nifty library has a Popovers Component that lets you embed the form as markup:
Mike Costello 发布了Bootstrap Web Components。这个漂亮的库有一个 Popovers 组件，可让您将表单嵌入为标记：
<button id="popover-target" data-original-title="MyTitle" title="">Popover</button>
<bs-popover title="Popover with Title" for="popover-target">
<!-- MyForm -->
</bs-popover>
回答by zainiafzan
<a data-title="A Title" data-placement="top" data-html="true" data-content="<form><input type='text'/></form>" data-trigger="hover" rel="popover" class="btn btn-primary" id="test">Top popover</a>
just state data-html="true"
只需说明 data-html="true"
回答by Tats_innit
like this Working demohttp://jsfiddle.net/7e2XU/21/show/#* Update: http://jsfiddle.net/kz5kjmbt/
像这样工作演示http://jsfiddle.net/7e2XU/21/show/#* 更新：http: //jsfiddle.net/kz5kjmbt/
<div class="container">
<div class="row" style="padding-top: 240px;"> <a href="#" class="btn btn-large btn-primary" rel="popover" data-content='
<form id="mainForm" name="mainForm" method="post" action="">
<p>
<label>Name :</label>
<input type="text" id="txtName" name="txtName" />
</p>
<p>
<label>Address 1 :</label>
<input type="text" id="txtAddress" name="txtAddress" />
</p>
<p>
<label>City :</label>
<input type="text" id="txtCity" name="txtCity" />
</p>
<p>
<input type="submit" name="Submit" value="Submit" />
</p>
</form>
data-placement="top" data-original-title="Fill in form">Open form</a>
</div>
</div>
JavaScript code:
JavaScript 代码：
$('a[rel=popover]').popover({
html: 'true',
placement: 'right'
})
ScreenShot
截屏
回答by Fred
You can load the form from a hidden divelement with the Bootstrap-provided hiddenclass.
您可以div使用 Bootstrap 提供的hidden类从隐藏元素加载表单。
<button class="btn btn-default" id="form-popover">Form popover</button>
<div class="hidden">
<form id="form">
<input type="text" class="form-control" />
</form>
</div>
JavaScript:
JavaScript：
$('#form-popover').popover({
content: $('#form').parent().html(),
html: true,
});
回答by ivan ivan
Or try this one
或者试试这个
Second one including second hidden div content to hold the form working and test on fiddle http://jsfiddle.net/7e2XU/21/
第二个包括第二个隐藏的 div 内容来保持表单工作和测试小提琴http://jsfiddle.net/7e2XU/21/
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<div id="popover-content" style="display: none" >
<div class="container" style="margin: 25px; ">
<div class="row" style="padding-top: 240px;">
<label id="sample">
<form id="mainForm" name="mainForm" method="post" action="">
<p>
<label>Name :</label>
<input type="text" id="txtName" name="txtName" />
</p>
<p>
<label>Address 1 :</label>
<input type="text" id="txtAddress" name="txtAddress" />
</p>
<p>
<label>City :</label>
<input type="text" id="txtCity" name="txtCity" />
</p>
<p>
<input type="submit" name="Submit" value="Submit" />
</p>
</form>
</label>
</div>
</div>
</div>
<a href="#" style="margin: 40px 40px;" class="btn btn-large btn-primary" rel="popover" data-content='' data-placement="left" data-original-title="Fill in form">Open form</a>
<script>
$('a[rel=popover]').popover({
html: 'true',
placement: 'right',
content : function() {
return $('#popover-content').html();
}
})
</script>
回答by Sam
A complete solution for anyone that might need it, I've used this with good results so far
对于可能需要它的任何人来说，这是一个完整的解决方案，到目前为止，我已经使用它取得了良好的效果
JS:
JS：
$(".btn-popover-container").each(function() {
var btn = $(this).children(".popover-btn");
var titleContainer = $(this).children(".btn-popover-title");
var contentContainer = $(this).children(".btn-popover-content");
var title = $(titleContainer).html();
var content = $(contentContainer).html();
$(btn).popover({
html: true,
title: title,
content: content,
placement: 'right'
});
});
HTML:
HTML：
<div class="btn-popover-container">
<button type="button" class="btn btn-link popover-btn">Button Name</button>
<div class="btn-popover-title">
Popover Title
</div>
<div class="btn-popover-content">
<form>
Or Other content..
</form>
</div>
</div>
CSS:
CSS：
.btn-popover-container {
display: inline-block;
}
.btn-popover-container .btn-popover-title, .btn-popover-container .btn-popover-content {
display: none;
}
回答by bbruman
I work in WordPress a lot so use PHP.
我经常使用 WordPress，所以使用 PHP。
My method is to contain my HTML in a PHP Variable, and then echo the variable in data-content.
我的方法是将我的 HTML 包含在 PHP 变量中，然后在data-content.
$my-data-content = '<form><input type="text"/></form>';
along with
随着
data-content='<?php echo $my-data-content; ?>'
