我在我的网站上使用此代码:// 2024 年 8 月 22 日社交证明 popupsetInterval(function() { $(\'.custom-social-proof\').stop().slideToggle('slow');}, 15000);$(\'.custom-close\').click(funct...
// Aug 22 2024 social proof popup
setInterval(function() {
$(".custom-social-proof").stop().slideToggle('slow');
}, 15000);
$(".custom-close").click(function() {
$(".custom-social-proof").stop().slideToggle('slow');
});
/* Aug 22 2024 Social proof popup */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
.custom-social-proof {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 9999999999999 !important;
font-family: 'Open Sans', sans-serif;
//display: none; /* Uncoment This Line to Hide Initially*/
.custom-notification {
width: 320px;
border: 0;
text-align: left;
z-index: 99999;
box-sizing: border-box;
font-weight: 400;
border-radius: 6px;
box-shadow: 2px 2px 10px 2px hsla(0, 4%, 4%, 0.2);
background-color: #fff;
position: relative;
cursor: pointer;
.custom-notification-container {
display: flex !important;
align-items: center;
height: 100px;
.custom-notification-image-wrapper {
img {
max-height: 75px;
width: 90px;
overflow: hidden;
border-radius: 6px 0 0 6px;
object-fit: contain;
}
}
.custom-notification-content-wrapper {
margin: 0;
height: 100%;
color: gray;
padding-left: 20px;
padding-right: 20px;
border-radius: 0 6px 6px 0;
flex: 1;
display: flex !important;
flex-direction: column;
justify-content: center;
.custom-notification-content {
font-family: inherit !important;
margin: 0 !important;
padding: 0 !important;
font-size: 14px;
line-height: 16px;
small {
margin-top: 3px !important;
display: block !important;
font-size: 12px !important;
opacity: .8;
}
}
}
}
.custom-close {
position: absolute;
top: 8px;
right: 8px;
height: 12px;
width: 12px;
cursor: pointer;
transition: .2s ease-in-out;
transform: rotate(45deg);
opacity: 0;
&::before {
content: "";
display: block;
width: 100%;
height: 2px;
background-color: gray;
position: absolute;
left: 0;
top: 5px;
}
&::after {
content: "";
display: block;
height: 100%;
width: 2px;
background-color: gray;
position: absolute;
left: 5px;
top: 0;
}
}
&:hover {
.custom-close {
opacity: 1;
}
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<section class="custom-social-proof">
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
<img src="/images/sproofavatar.jpg">
</div>
<div class="custom-notification-content-wrapper">
<p class="custom-notification-content">
Anonymous Users<br>Took <b> The Nutritional Cell Organ Quiz</b>
<small>Within The Past 4 Hours</small> <small><strong><a href="/questions/cell-organ-quiz.html" style="color:green;">Maybe you should also?</a></strong></small>
</p>
</div>
</div>
<div class="custom-close"></div>
</div>
</section>
我的网站缩写网址为 https://shorturl.at/SSnqN