Question

是否可以使用自定义引导程序弹出窗口？

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

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

所以点击一个元素#example，我会传递一些文字（会以可编辑的textarea显示）;

enter image description here

我正在使用bootstrap 2.3.2

Answer 1

我不认为评论中的链接完全回答了这个问题。这是一个2.3.2示例，使用多个链接/元素，将text()从元素传递到弹出窗口上的textarea，然后返回到元素＆＃34;提交＆＃34; ：

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

使用popovers template功能自定义弹出窗口（添加按钮），将<textarea>设置为content，将链接/元素的文本注入{{1}上的textarea event：

shown

看小提琴 - ＆gt; http://jsfiddle.net/e4zMu/ 此处有三个可编辑的链接/元素：

enter image description here

Answer 2

如果你想使用RAZOR或HTML，实际上可以用作popover的模板（而不是通过JS中的属性注入它）：

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

我们使用razor为popover-content创建HTML TEMLPLATE。

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

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

这对于content属性做了什么，我们使用jquery在这个痕迹中搜索data-contentwrapper。

我们使用Razor创建每个breadcrumb元素（使用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与客户端bootstrap popover html内容结合起来的人。

Bootstrap自定义弹出窗口

2 个答案: