gpt4 book ai didi

javascript - 为 jQuery 弹出窗口堆叠 div 元素

转载 作者:太空宇宙 更新时间:2023-11-04 12:46:21 24 4
gpt4 key购买 nike

我正在使用 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;
}

关于javascript - 为 jQuery 弹出窗口堆叠 div 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26492734/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com