Bootstrap 自定义弹出框

Question

是否可以自定义引导弹出框？

我的意思是我希望能够使用

$('#example').popover(options)

所以在点击元素#example 时，我将传递一些文本（将显示在可编辑的文本区域中）；

我正在使用引导程序 2.3.2

Answer 1

我不认为 cmets 中的链接完全回答了这个问题。这是一个 2.3.2 示例，使用多个链接/元素，将 text() 从元素传递到弹出框上的文本区域，并在“提交”时返回到元素：

<a href="#" rel="comments" title="Enter comments">awesome user</a>

使用弹出框template 功能自定义弹出框（添加按钮），将<textarea> 设置为content，在shown 事件上将链接/元素的文本注入文本区域：

$("[rel=comments]").popover({
    trigger : 'click',  
    placement : 'top', 
    html: 'true', 
    content : '<textarea class="popover-textarea"></textarea>',
    template: '<div class="popover"><div class="arrow"></div>'+
              '<h3 class="popover-title"></h3><div class="popover-content">'+
              '</div><div class="popover-footer"><button type="button" class="btn btn-primary popover-submit">'+
              '<i class="icon-ok icon-white"></i></button>&nbsp;'+
              '<button type="button" class="btn btn-default popover-cancel">'+
              '<i class="icon-remove"></i></button></div></div>' 
})
.on('shown', function() {
    //hide any visible comment-popover
    $("[rel=comments]").not(this).popover('hide');
    var $this = $(this);
    //attach link text
    $('.popover-textarea').val($this.text()).focus();
    //close on cancel
    $('.popover-cancel').click(function() {
        $this.popover('hide');
    });
    //update link text on submit
    $('.popover-submit').click(function() {
        $this.text($('.popover-textarea').val());
        $this.popover('hide');
    });
});

参见小提琴 -> http://jsfiddle.net/e4zMu/ 这里有三个可编辑的链接/元素：

Answer 2

如果你想使用 RAZOR 或 HTML 作为弹出框的模板（而不是通过 JS 中的属性注入）：

在下面的示例中，我们构建了一个带有弹出框的引导程序面包屑控件，其中包含一个值列表，可以选择这些值来更改面包屑的值。

我们使用 razor 为弹出内容创建 HTML TEMLPLATE。

这就是弹出框使用 HTML 作为其“内容”的方式：

<script type='text/javascript'>
    $(function () {
        $('a[data-toggle="popover"]').popover({
            html: true,
            content: function () {
                return $($(this).data('contentwrapper')).html();
            }
        });
    });
</script>

这是针对内容属性所做的，我们使用 jquery 在此面包屑中搜索 data-contentwrapper。

我们使用 Razor 创建每个面包屑元素（使用 orderlist / listitem）和一个包含要在我们的数据切换中使用的正确 id 的 div。

<ol class="breadcrumb">
    @foreach (var segment in Model.Segments)
    {
        var selectedChild = segment.SelectedChild;
        var popoverId = segment.Id + "_breadcrumb_popover";
        var longCaption = segment.Caption;
        var shortCaption = segment.Id;
        var childType = segment.ChildType;
        if (segment.SelectedChild != null)
        {
            shortCaption = segment.SelectedChild.Id;
        }
        else
        {
            // if the selected child is null, then we want the text to show 'select ' _grandchildType is
            shortCaption = string.Format("Select {0} ?", segment.ChildType);
        }
        var listItemClassString = (segment.Children.Any()) ? "" : "hidden";

        <!-- THIS IS THE BREADCRUMB ELEMENT -->
        <li class="@listItemClassString">
            <small>@childType</small>
            <a href="javascript: void(0)" tabindex="0" rel="popover" data-container="body"
           data-html="true" data-toggle="popover" data-placement="bottom"
           data-animation="true" data-trigger="focus" title="Choose @childType" data-contentwrapper="#@popoverId" >@shortCaption</a>
            <i class="glyphicon glyphicon-chevron-right"></i>

        </li>


        <!-- THIS IS THE TEMPLATE DROPDOWNLIST FOR THe above list item -->
        <div role="tooltip" title="FROM TEMPLATE" class="popover breadcrumb hidden" id="@popoverId">
            <div class="arrow"></div>
            @*<h3 class="popover-title"></h3>*@
            <div class="popover-content" class='panel clearfix hidden' style='padding-right: 10px;'>
                <ul class="list-group">
                    @foreach (var option in segment.Children)
                    {

                        <li class="list-group-item">
                            @{
                        var url = new UrlHelper(ViewContext.RequestContext, RouteTable.Routes).RouteUrl("DefaultWithBreadcrumb",
                            new
                            {
                                action = parentRouteData.Values["action"] as String,
                                controller = parentRouteData.Values["controller"] as String,
                                breadcrumbPath = option.Url
                            });
                            }
                            <a href="@url" style="font-size:.9em;">@option.Caption</a>
                        </li>
                        <!-- class='col-md-3 col-sm-4'-->
                    }
                    @{ tabIndex++;}
                </ul>
            </div>
        </div>
    }
</ol>

希望这对希望将服务器端 MVC 与客户端引导弹出框 html 内容相结合的人有所帮助。