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

Posted 2023-02-22

【中文标题】在引导弹出窗口中包含表单？

【英文标题】：Contain form within a bootstrap popover?

【发布时间】：2012-08-21 03:22:55

【问题描述】：

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

如何在引导弹出框内包含表单？

【参考方案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

【讨论】：

很好的解决方案，我只是把标题放在data-title="Some Title" 的<a id="myID"> 标签中，因为没有额外的div...

@HaNdTriX +10 表示你的表达方式。

是的，很棒的答案。不得不说。一次又一次地！非常感谢。

请阅读：getbootstrap.com/javascript/#popovers 您正在寻找trigger 选项。 (trigger: 'focus')

你为什么不使用：angular-ui.github.io/bootstrap/#/popover？它应该可以解决您的问题。

【参考方案2】：

在单引号内替换 type="text" 周围的双引号，例如：

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

或

将包裹data-content的双引号替换为单引号，例如：

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

【讨论】：

别忘了按钮标签中的“data-html='true'”

从 Bootstrap >= 3.4 开始，您还需要 sanitize: false 作为初始化选项

【参考方案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"

【参考方案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'
    )

屏幕截图

【讨论】：

@DERIIIFranz 感谢它现在已修复：jsfiddle.net/kz5kjmbt CDN 不见了，结帐更新的链接和屏幕截图。 :)

此解决方案适用于当前的 Chrome 并回答了问题。但是，在 html 属性中包含复杂的标记可能容易出错，并增加代码的可维护性和可学习性风险。

【参考方案5】：

您可以使用 Bootstrap 提供的 hidden 类从隐藏的 div 元素加载表单。

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

【讨论】：

将$(...).parent().html() 替换为$(...).clone() ;)

如果你克隆，你也可以使用<template>元素代替隐藏元素。

【参考方案6】：

或者试试这个

第二个，包括第二个隐藏的 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 链接似乎与相同的实现不对应。你会发现我做的这个 plunk 正确地实现了它：plnkr.co/edit/IV2YbLCFSiYI0T1mXOLN?p=preview.

【参考方案7】：

对于任何可能需要它的人来说都是一个完整的解决方案，到目前为止我已经使用它并取得了很好的效果

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;

【参考方案8】：

我经常使用 WordPress，所以使用 php。

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

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

随着

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