javascript - Bootstrap 弹出窗口未出现在我的 ASP.NET MVC 项目中

Question

我目前正在尝试创建一个弹出窗口，在按下按钮时显示该弹出窗口。该按钮处于循环中并针对许多变量 j 执行。代码主要取自Bootstrap网页。

我的代码如下:

<a href='#' class="btn btn-xs" data-container="body" style="float:right;
 margin-top:-1px;" role="button" data-toggle="popover_@j" 
 data-placement="top" data-trigger="focus" 
 data-content="Content">
 <span class="glyphicon glyphicon-minus" aria-hidden="true"></span></a>

我的 View 还包含:

<script>
$(document).ready(function () {
     $('[data-toggle="popover_@j"]').popover()});
</script>

当我在 W3Editor 上运行此代码时，会出现弹出窗口。但是，在我的项目中，没有出现弹出窗口。

任何有关让弹出窗口出现的帮助将不胜感激。

Answer 1

试试这个:

使用以下 html 代码:

<div class="forLinks" data-toggle="popover" data-placement="bottom" style="width: 75px;">
                        <div style="width: 22px; height: 22px; margin-top: 16px; margin-left: 21px; cursor: pointer;">

                            <img src="~/Modules/REBAR.PersonalizeList/Styles/Images/RelatedLinksBox.PNG" style="height: 22px; width: 22px; cursor: pointer; /*display: block; */" />
                        </div>
                        <div style="width: 110px; height: 22px; margin-left: 50px; cursor: pointer; margin-top: -17px;">
                            <span id="SpanRelatedLinks" style="width: 85px; cursor: pointer; font-size: 13px; color: #ffffff;">Related Links</span>
                        </div>
                    </div>
                    <div id="popover-content" style="display: none; margin-left: 5px">
                        @foreach (Accenture.Orchard.QuicklinkItemManager.Models.QuicklinkItemViewModel LinkItem in Model.QuickLinks)
                        {
                            <div class="popoverLinks"><a style="cursor: pointer; width: 100%;" class="AnchorLinks" target="_blank" href="@LinkItem.Url">@LinkItem.Name</a></div>
                        }
                    </div>

和 jquery 代码:

$(document).ready(function() {
$('[data-toggle="popover"]').popover({
                html: true,
                content: function () {
                    return $('#popover-content').html();
                }
            });

            $('.forLinks').on('shown.bs.popover', function () {
                var element = $('.popover'),
                    style = window.getComputedStyle(element[0]),
                    left = style.getPropertyValue('left');
                var leftValue = left.replace("px", "");
                $('.popover').css('left', parseInt(leftValue) - 5);
            });

            $('body').on('click', function (e) {
                $('[data-toggle=popover]').each(function () {
                    // hide any open popovers when the anywhere else in the body is clicked 
                    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').length != 0) {
                        $('.forLinks').trigger('click');
                    }
                });
            });
});