在引导弹窗内包含表单？

<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> 

的jsfiddle

我猜我会将表单内容存储在一个javascript函数中…

如何在自举popover中包含表单？

Answer 1

或者用单引号replacetype="text"的双引号，Like

 "<form><input type='text'/></form>" 

要么

用双引号replace用引号括起来的双引号

 data-content='<form><input type="text"/></form>' 

Answer 2

我会把我的表单放入标记，而不是放入一些数据标记。 这是如何工作的：

JS代码：

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

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> 

演示

替代方法：

X-编辑

你可能想看看X-Editable 。 一个库，允许您创build基于popup的页面上的可编辑元素。

Webcomponents

Mike Costello发布了Bootstrap Web组件 。 这个漂亮的库有一个Popovers组件，可以让你把表单embedded到标记中：

 <button id="popover-target" data-original-title="MyTitle" title="">Popover</button> <bs-popover title="Popover with Title" for="popover-target"> <!-- MyForm --> </bs-popover> 

演示

Answer 3

 <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> 

只是状态data-html =“true”

Answer 4

或者试试这个

第二个包括第二个隐藏的div内容，以保持forms工作和testing小提琴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> 

Answer 5

像这样工作演示 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代码：

  $('a[rel=popover]').popover({ html: 'true', placement: 'right' }) 

截图

Answer 6

您可以使用Bootstrap提供的hidden类从隐藏的div元素加载表单。

 <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的：

 $('#form-popover').popover({ content: $('#form').parent().html(), html: true, }); 

Answer 7

一个完整的解决scheme，任何人可能需要它，我已经使用这个有很好的结果

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：

 <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：

 .btn-popover-container { display: inline-block; } .btn-popover-container .btn-popover-title, .btn-popover-container .btn-popover-content { display: none; } 

Answer 8

我在WordPress工作很多，所以使用PHP。

我的方法是将我的HTML包含在PHPvariables中，然后在data-content回显variables。

 $my-data-content = '<form><input type="text"/></form>'; 

随着

 data-content='<?php echo $my-data-content; ?>'