Fatal编程技术网
  • javascript/
  • Javascript 我的ASP.NET MVC项目中未出现引导弹出窗口

Javascript 我的ASP.NET MVC项目中未出现引导弹出窗口

javascript jquery asp.net asp.net-mvc twitter-bootstrap

Javascript 我的ASP.NET MVC项目中未出现引导弹出窗口,javascript,jquery,asp.net,asp.net-mvc,twitter-bootstrap,Javascript,Jquery,Asp.net,Asp.net Mvc,Twitter Bootstrap,我目前正在尝试创建一个弹出窗口，当按下按钮时显示。该按钮位于循环中，对许多变量j执行。代码主要取自引导程序网页 我的代码如下： <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-c

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

我的代码如下：

<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>
我的观点还包括：

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


$（文档）.ready（函数（）{
$（'[data toggle=“popover_@j”]'）.popover（）}）；
当我在W3Editor上运行此代码时，弹出窗口出现。但是，在我的项目中，没有弹出窗口出现

如果您能帮助弹出popover，我们将不胜感激。

试试这个：

使用以下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>
添加以下css:

.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1060;
    display: none;
    max-width: 276px;
    padding: 1px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    white-space: normal;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    line-break: auto;
}

    .popover.top {
        margin-top: -10px;
    }

    .popover.right {
        margin-left: 10px;
    }

    .popover.bottom {
        margin-top: 10px;
    }

    .popover.left {
        margin-left: -10px;
    }

.popover-title {
    padding: 8px 14px;
    margin: 0;
    font-size: 14px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    border-radius: 5px 5px 0 0;
}

.popover-content {
    /*padding: 9px 14px;*/
    padding-top: 9px;
    padding-bottom: 9px;
}

.AnchorLinks {
    padding-left: 14px;
    padding-right: 14px;
}

.popoverLinks {
    /*Added by prasad*/
    /*padding-bottom: 3px;*/
    height: 28px;
    border-bottom-color: #f0f0f0;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.popover > .arrow,
.popover > .arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.popover > .arrow {
    border-width: 11px;
}

    .popover > .arrow:after {
        content: "";
        border-width: 10px;
    }

.popover.top > .arrow {
    bottom: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-color: #999;
    border-top-color: rgba(0, 0, 0, .25);
    border-bottom-width: 0;
}

    .popover.top > .arrow:after {
        bottom: 1px;
        margin-left: -10px;
        content: " ";
        border-top-color: #fff;
        border-bottom-width: 0;
    }

.popover.right > .arrow {
    top: 50%;
    left: -11px;
    margin-top: -11px;
    border-right-color: #999;
    border-right-color: rgba(0, 0, 0, .25);
    border-left-width: 0;
}

    .popover.right > .arrow:after {
        bottom: -10px;
        left: 1px;
        content: " ";
        border-right-color: #fff;
        border-left-width: 0;
    }

.popover.bottom > .arrow {
    top: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-width: 0;
    border-bottom-color: #999;
    border-bottom-color: rgba(0, 0, 0, .25);
}

    .popover.bottom > .arrow:after {
        top: 1px;
        margin-left: -10px;
        content: " ";
        border-top-width: 0;
        border-bottom-color: #fff;
    }

.popover.left > .arrow {
    top: 50%;
    right: -11px;
    margin-top: -11px;
    border-right-width: 0;
    border-left-color: #999;
    border-left-color: rgba(0, 0, 0, .25);
}

    .popover.left > .arrow:after {
        right: 1px;
        bottom: -10px;
        content: " ";
        border-right-width: 0;
        border-left-color: #fff;
    }

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}

    .fade.in {
        opacity: 1;
    }

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

$(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');
                    }
                });
            });
});
html代码：

.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1060;
    display: none;
    max-width: 276px;
    padding: 1px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    white-space: normal;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    line-break: auto;
}

    .popover.top {
        margin-top: -10px;
    }

    .popover.right {
        margin-left: 10px;
    }

    .popover.bottom {
        margin-top: 10px;
    }

    .popover.left {
        margin-left: -10px;
    }

.popover-title {
    padding: 8px 14px;
    margin: 0;
    font-size: 14px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    border-radius: 5px 5px 0 0;
}

.popover-content {
    /*padding: 9px 14px;*/
    padding-top: 9px;
    padding-bottom: 9px;
}

.AnchorLinks {
    padding-left: 14px;
    padding-right: 14px;
}

.popoverLinks {
    /*Added by prasad*/
    /*padding-bottom: 3px;*/
    height: 28px;
    border-bottom-color: #f0f0f0;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.popover > .arrow,
.popover > .arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.popover > .arrow {
    border-width: 11px;
}

    .popover > .arrow:after {
        content: "";
        border-width: 10px;
    }

.popover.top > .arrow {
    bottom: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-color: #999;
    border-top-color: rgba(0, 0, 0, .25);
    border-bottom-width: 0;
}

    .popover.top > .arrow:after {
        bottom: 1px;
        margin-left: -10px;
        content: " ";
        border-top-color: #fff;
        border-bottom-width: 0;
    }

.popover.right > .arrow {
    top: 50%;
    left: -11px;
    margin-top: -11px;
    border-right-color: #999;
    border-right-color: rgba(0, 0, 0, .25);
    border-left-width: 0;
}

    .popover.right > .arrow:after {
        bottom: -10px;
        left: 1px;
        content: " ";
        border-right-color: #fff;
        border-left-width: 0;
    }

.popover.bottom > .arrow {
    top: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-width: 0;
    border-bottom-color: #999;
    border-bottom-color: rgba(0, 0, 0, .25);
}

    .popover.bottom > .arrow:after {
        top: 1px;
        margin-left: -10px;
        content: " ";
        border-top-width: 0;
        border-bottom-color: #fff;
    }

.popover.left > .arrow {
    top: 50%;
    right: -11px;
    margin-top: -11px;
    border-right-width: 0;
    border-left-color: #999;
    border-left-color: rgba(0, 0, 0, .25);
}

    .popover.left > .arrow:after {
        right: 1px;
        bottom: -10px;
        content: " ";
        border-right-width: 0;
        border-left-color: #fff;
    }

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}

    .fade.in {
        opacity: 1;
    }

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

$(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');
                    }
                });
            });
});
此外，我已经检查了我的z值是否足够用于popover，它的值为1060。问题可能是您正在运行“脚本”组件一次（在doc ready上），而不是在按钮完成“循环”之后。在循环后尝试使用javascript。谢谢Kevin P，不幸的是，移动脚本块对结果没有影响。谢谢你的回答。我实现了您的代码，但去掉了围绕div class=“popover content”和图像以及相关div标记的foreach循环。不过，这并不会导致我的解决方案出现弹出窗口。@fuzzii在另一个答案中给出css代码，请参考该答案，并告诉我您是否面临任何其他问题。谢谢