在引导弹出窗口中包含表格吗?


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

JS小提琴

我猜想我会将表单内容存储在javascript函数中...

如何在引导弹出窗口中包含表单?

Answers:


50

可以type="text"用单引号替换双引号,例如

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

要么

data-content用单引号替换双引号,例如

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

17
不要忘记按钮标签中的“ data-html ='true'”
cwirz 2015年

275

我会将表单放入标记中,而不放入数据标签中。这是如何工作的:

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。一个库,使您可以基于弹出窗口在页面上创建可编辑的元素。

X可编辑的演示

Web组件

Mike Costello发布了Bootstrap Web组件。这个漂亮的库有一个Popovers组件,可让您将表单作为标记嵌入:

<button id="popover-target" data-original-title="MyTitle" title="">Popover</button>

<bs-popover title="Popover with Title" for="popover-target">
  <!-- MyForm -->
</bs-popover>

演示版


1
不错的解决方案,我只是将标题data-title="Some Title"放在<a id="myID">标签内是为了避免多余的分格...
pebbo 2012年

1
唯一的真实答案。
poitroae 2013年

1
@HaNdTriX +10,表示方法。
2013年

1
请阅读:getbootstrap.com/javascript/#popovers您正在寻找该trigger选项。(trigger: 'focus'
HaNdTriX 2014年

1
为什么不使用:angular-ui.github.io/bootstrap/#/popover?它应该可以解决您的问题。
HaNdTriX 2015年

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


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'
    })

屏幕截图

工作更新小提琴屏幕截图


@DERIIIFranz现在感谢其修复:jsfiddle.net/kz5kjmbt CDN丢失,检出了更新的链接和屏幕截图。:)
Tats_innit

此解决方案可在当前的Chrome浏览器上使用,并可以回答问题。但是,在html属性中包含复杂的标记可能易于出错,并增加了代码的可维护性和可学习性的风险。
里卡多

4

您可以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,
});

1
替换$(...).parent().html()$(...).clone();)
Rhys Bradbury

3

或者尝试这个

第二个内容包括第二个隐藏的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>

这是一个不错的解决方案,但您的jsfiddle链接似乎与相同的实现不对应。您会发现我制作的该插件正确实现了它:plnkr.co/edit/IV2YbLCFSiYI0T1mXOLN?p=preview
bernardn

2

对于可能需要它的任何人来说,这是一个完整的解决方案,到目前为止,我已经用它取得了不错的效果

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

1

我经常在WordPress中工作,因此请使用PHP。

我的方法是将HTML包含在PHP变量中,然后在中回显该变量data-content

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

随着

data-content='<?php echo $my-data-content; ?>' 
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.