96 
<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関数内に保存すると思います...

ブートストラップポップオーバー内にフォームを含めるにはどうすればよいですか？

4

8 に答える 8

278

フォームをデータタグではなくマークアップに入れます。これがどのように機能するかです：

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コンポーネント

MikeCostelloがBootstrapWebComponentsをリリースしました。この気の利いたライブラリには、フォームをマークアップとして埋め込むことができるPopoversコンポーネントがあります。

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

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

デモ

于 2012-08-26T08:46:22.367 に答える
50

type="text"次のように、一重引用符内の二重引用符を置き換えます。

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

また

次のように、二重引用符の折り返しdata-contentを一重引用符に置き換えます。

data-content='<form><input type="text"/></form>'
于 2012-08-26T07:38:38.523 に答える
12 
<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"とだけ記載してください

于 2013-01-07T14:35:09.277 に答える
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'
    })

ScreenShot

作業中の更新されたフィドルのスクリーンショット

于 2012-08-26T07:46:20.197 に答える
5

divBootstrapが提供する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,
});
于 2015-03-09T15:20:11.520 に答える
3

またはこれを試してください

フォームを機能させ、フィドルでテストするための2番目の非表示のdivコンテンツを含む2番目のコンテンツ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>
于 2013-03-23T20:59:20.957 に答える
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;
}
于 2014-07-03T14:35:08.083 に答える
1

私はWordPressでよく働いているので、PHPを使用します。

私の方法は、HTMLをPHP変数に含めてから、変数をにエコーすることですdata-content。

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

一緒に

data-content='<?php echo $my-data-content; ?>'
于 2016-10-05T21:55:46.170 に答える