引导弹出窗口没有出现在我的ASP.. NET MVC项目
Bootstrap popover not appearing in my ASP.NET MVC project
我目前正在尝试创建一个弹出窗口，显示当一个按钮被按下。按钮在一个循环中，并执行许多变量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>
My View还包含:
<script>
$(document).ready(function () {
$('[data-toggle="popover_@j"]').popover()});
</script>
当我在W3Editor上运行这段代码时，弹出窗口出现了。然而，在我的项目中，没有弹出窗口出现。
让弹出窗口出现的任何帮助将非常感激。
试试这个:
使用以下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');
}
});
});
});
添加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;
}
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>
$(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');
}
});
});
});
相关文章：
- 如何将我的自定义时间选择器链接到我的asp.net
- 如何在asp.net中自动注销我的网站10分钟后，在我的网站处于空闲状态
- 使用JavaScript将日期/时间添加到我的asp.net用户控件中
- 如何让javascript在Asp.Net中注入到我的布局中的视图中进行渲染
- Regex验证应用于我的asp网页上的所有按钮
- 将jsmeter用于我的asp.net应用程序
- ASP控件触发JavaScript，但我的函数未定义
- ASP.NET:是否可以将CSS或Javascript注入到我的Web应用程序中的每个页面中
- 禁用浏览器后退按钮，但在我的 asp.net 应用程序中保持启用状态
- JSON 对象未正确发送到我的 ASP.NET MVC 控制器，缺少属性
- 为什么我的ASP网站内容没有被谷歌抓取
- 在编辑我的信息 (asp.net） 后获取 HTML 标记
- 使用 ajax 将我的 asp.net 网格视图与 javascript 绑定
- 如何让我的 ASP 表控件显示/隐藏?(并不像听起来那么简单）
- 我可以在我的 asp.net 代码中访问 Javascript 数组吗?
- 如何触发附加到我的页面的内联 Javascript?(ASP.NET 网络表单）
- 如何查看我的 asp.net 网站的实时访问者数量
- 在 ASP.NET 中使用母版页时使用我的 sript
- 如何在脚本中传递有关我的 asp 页面中“OnClick”事件的参数
- 设置我的ASP.NET MVC 3项目自动感知正在运行的语言
