朋友们,我正在我的网站上实现一个通知弹出窗口。弹出窗口工作正常,但其中的链接不起作用。
这是我的__navbar.html(仅包含notifications.html
{% include "__notifications.html" %}
和我的__notifications.html
<li id="notification_li">
<a href="#" id="notificationLink" style="outline: none">Notifications</a>
<span id="notification_count">{{ notifications.count }}</span>
<div id="notificationContainer" style="opacity:1">
<div id="notificationTitle">Notifications</div>
<div id="notificationsBody" class="notifications">
<ul>
{% for n in notifications %}
{% if n.type == "followed" %}
<li class="alert alert-info">
<a href="{% url 'profile' n.fr.username %}">{{ n.fr.username }}</a> {{ n.text }}
<span style="float:right;color:gray">{{ n.timestamps|timesince }} ago</span>
<!--<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>-->
</li>
{% elif n.type == "correct" %}
<li class="alert alert-success">
<a href="{% url 'profile' n.fr.username %}">{{ n.fr.username }}</a> {{ n.text }}
<span style="float:right;color:gray">{{ n.timestamps|timesince }} ago</span>
<!--<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>-->
</li>
{% else %}
<li class="alert alert-danger">
<a href="{% url 'profile' n.fr.username %}">{{ n.fr.username }}</a> {{ n.text }}
<span style="float:right;color:gray">{{ n.timestamps|timesince }} ago</span>
<!--<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>-->
</li>
{% endif %}
{% endfor %}
</ul>
</div>
<div id="notificationFooter">
<a href="#" class="btn btn-xs btn-Biology" style="border-radius: 22px;">View All</a>
<a href="{% url 'clear_notifications' %}" class="btn btn-xs btn-warning" style="border-radius: 22px;position:relative"> Clear All</a>
</div>
</div>
</li>
如果有帮助,这是我的notifications.css
#notification_li
{
position:relative
}
#notification_li > a{
color:white;
}
.navbar > .navbar-right > #notification_li > #notificationLin > #notificationContainer{
opacity:1;
}
#notificationContainer
{
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: visible;
position: absolute;
top: 30px;
opacity: 0.9;
opacity:1;
margin-left: -70px;
width: 400px;
z-index: 0;
margin-top: 14px;
display: none; // Enable this after jquery implementation
}
// Popup Arrow
#notificationContainer:before {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
color: transparent;
border: 10px solid black;
border-color: transparent transparent white;
margin-top: 10px;
margin-left: 188px;
}
#notificationTitle
{
font-weight: bold;
padding: 8px;
font-size: 13px;
background-color: #ffffff;
position: fixed;
z-index: 1000;
width: 384px;
border-bottom: 1px solid #dddddd;
}
#notificationsBody
{
padding: 33px 0px 0px 0px !important;
height:auto;
}
#notificationsBody > ul{
margin-left:-40px;
margin-bottom: -20px;
}
#notificationsBody > ul > li:first-child{
margin-top:3px;
}
#notificationsBody > ul > li{
margin-top:-20px;
}
#notificationFooter
{
background-color: #e9eaed;
text-align: center;
font-weight: bold;
padding: 8px;
font-size: 12px;
border-top: 1px solid #dddddd;
}
#notification_count
{
padding: 3px 7px 3px 7px;
background: #cc0000;
color: #ffffff;
font-weight: bold;
margin-left: 102px;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
position: absolute;
margin-top: -35px;
font-size: 11px;
}
.notifications > ul > li{
list-style-type:none;
}
最后,我的notifications.js
$(document).ready(function()
{
$("#notificationLink").click(function()
{
$("#notificationContainer").fadeToggle(300);
//$("#notification_count").fadeOut("slow");
return false;
});
//Document Click hiding the popup
$(document).click(function()
{
$("#notificationContainer").hide();
});
//Popup on click
$("#notificationContainer").click(function()
{
return false;
});
});
当我点击弹出窗口中的链接时,它们什么都不做。我该怎么办?