javascript - 在 Bootstrap 弹出窗口中包含表单？

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

如何在 Bootstrap 弹出窗口中包含表单？

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>

Demo

替代方法:

X-可编辑

您可能想看看 X-Editable . 允许您基于弹出窗口在页面上创建可编辑元素的库。

网络组件

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>

Demo