在引导程序弹出窗口中包含表单？

Question

<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函数中...

如何在引导程序弹出窗口中包含表单？

Answer 1

我会将我的表单放入标记而不是某些数据标记.这是它的工作方式:

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.一个库,允许您根据弹出窗口在页面上创建可编辑元素.

Webcomponents

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>

演示

Answer 2

type="text"用单引号替换双引号,Like

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

要么

data-content用单引号替换双引号,Like

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

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

像这样工作演示 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 5

您可以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：

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