[英]Stacking div elements for jQuery popup
我正在使用Zend partialLoop返回一個HTML腳本,該腳本將包含1個或多個div元素,其中的數據用於通知彈出窗口。 我很難像我目前的設計所希望的那樣,將partialLoop div元素堆疊在一起。
我該如何更改以允許div元素( notification-popup-container
及其所有子元素)一個接一個地堆疊?
JSFiddle在這里: http : //jsfiddle.net/phamousphil/rgt03mu4/
.notification-popup-container {
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: 55px;
left: 30px;
width: 400px;
z-index: 99;
display: none;
}
/*Popup Arrow*/
.notification-popup-container:before {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
color: transparent;
border: 10px solid black;
border-color: transparent transparent white;
margin-top: -20px;
/* margin-left: 337px; */
}
.notification-popup-body {
padding: 10px 0px 0px 0px !important;
}
$(function() {
var nContainer = $(".notification-popup-container");
//notification popup
$("#notification-link").click(function() {
nContainer.fadeToggle(300);
return false;
});
//page click to hide the popup
$(document).click(function() {
nContainer.hide();
});
//popup notification bubble on click
nContainer.click(function() {
return false;
});
});
<a id='notification-link' href='#'>
<img src='http://docs.blackberry.com/en/smartphone_users/deliverables/50635/mwa1358788933767_lowres_en-us.png' alt='Notifications' />
</a>
<div class='notification-popup-container'>
<div class='notification-popup-body'>
<div class="notification-popup-title">TITLE 1</div>
<div class="notification-popup-message">MESSAGE 1</div>
</div>
</div>
<div class='notification-popup-container'>
<div class='notification-popup-body'>
<div class="notification-popup-title">TITLE 2</div>
<div class="notification-popup-message">MESSAGE 2</div>
</div>
</div>
<div class='notification-popup-container'>
<div class='notification-popup-body'>
<div class="notification-popup-title">TITLE 3</div>
<div class="notification-popup-message">MESSAGE 3</div>
</div>
</div>
您需要將這些容器放入單個容器中,並刪除內部容器上的絕對位置。 您可以將絕對定位移動到外部容器。 在這里,我將其命名為notification-popup-container-main
。
這是一個示例: http : //jsfiddle.net/rgt03mu4/3/
<a id='notification-link' href='#'>
<img src='http://docs.blackberry.com/en/smartphone_users/deliverables/50635/mwa1358788933767_lowres_en-us.png' alt='Notifications' />
</a>
<div class='notification-popup-container-main'>
<div class='notification-popup-container'>
<div class='notification-popup-body'>
<div class="notification-popup-title">TITLE 1</div>
<div class="notification-popup-message">MESSAGE 1</div>
</div>
</div>
<div class='notification-popup-container'>
<div class='notification-popup-body'>
<div class="notification-popup-title">TITLE 2</div>
<div class="notification-popup-message">MESSAGE 2</div>
</div>
</div>
<div class='notification-popup-container'>
<div class='notification-popup-body'>
<div class="notification-popup-title">TITLE 3</div>
<div class="notification-popup-message">MESSAGE 3</div>
</div>
</div>
</div>
CSS:
.notification-popup-container-main {
position: absolute;
top: 55px;
left: 30px;
}
.notification-popup-container {
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: visible;
width: 400px;
z-index: 99;
display: none;
}
/*Popup Arrow*/
.notification-popup-container-main:before {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
color: transparent;
border: 10px solid black;
border-color: transparent transparent white;
margin-top: -20px;
/* margin-left: 337px; */
}
.notification-popup-body {
padding: 10px 0px 0px 0px !important;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.