Chứa biểu mẫu trong một cửa sổ bật lên bootstrap?

<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

Tôi đoán rằng tôi sẽ lưu trữ nội dung biểu mẫu trong một hàm javascript ...

Làm cách nào để chứa một biểu mẫu trong cửa sổ bật lên bootstrap?

Hoặc thay thế dấu ngoặc kép xung quanh type="text"bằng dấu ngoặc kép, Thích

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

HOẶC LÀ

thay thế dấu ngoặc kép bao bọc data-contentbằng dấu ngoặc kép, Thích

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

Tôi sẽ đặt biểu mẫu của mình vào phần đánh dấu chứ không phải vào một số thẻ dữ liệu. Đây là cách nó có thể hoạt động:

Mã JS:

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

Đánh dấu 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>

Bản giới thiệu

Cách tiếp cận khác:

X-Editable

Bạn có thể muốn xem qua X-Editable . Một thư viện cho phép bạn tạo các phần tử có thể chỉnh sửa trên trang của mình dựa trên các cửa sổ bật lên.

Thành phần web

Mike Costello đã phát hành Thành phần Web Bootstrap . Thư viện tiện lợi này có Thành phần cửa sổ bật lên cho phép bạn nhúng biểu mẫu dưới dạng đánh dấu:

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

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

Bản giới thiệu

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

chỉ trạng thái data-html = "true"

như thế này Bản demo làm việc http://jsfiddle.net/7e2XU/21/show/# * Cập nhật: 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>

Mã JavaScript:

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

ScreenShot

Bạn có thể tải biểu mẫu từ một divphần tử ẩn với lớp do Bootstrap cung hiddencấp.

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

Hoặc thử cái này

Cái thứ hai bao gồm nội dung div ẩn thứ hai để giữ biểu mẫu hoạt động và thử nghiệm trên fiddle 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>

Một giải pháp hoàn chỉnh cho bất kỳ ai có thể cần nó, tôi đã sử dụng nó với kết quả tốt cho đến nay

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

Tôi làm việc trong WordPress rất nhiều nên sử dụng PHP.

Phương pháp của tôi là chứa HTML của tôi trong một Biến PHP, và sau đó lặp lại biến vào data-content.

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

cùng với

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