Question

我正在使用Zend partialLoop来返回一个html脚本，该脚本将包含一个或多个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>

Answer 1

您需要将这些容器放入单个容器中，并移除内部容器上的绝对定位。您可以将绝对定位移动到外部容器。在这里，我将其命名为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;
}

堆叠jQuery弹出窗口的div元素

1 个答案: