頁面底部的彈出窗口 - javascript

Question

需要在瀏覽器底部顯示的彈出窗口應在 5 秒后隱藏並再次顯示。 問題是我需要滾動到瀏覽器窗口的底部才能看到彈出窗口。 使用了固定和定位底部。 希望彈出窗口顯示在視口底部。 想在 javascript 中做到這一點 有下面的 css。

css

.productPurchasePopup {
    width: 300px;
    height:100px;
    padding: 0px;
    margin: 0px;
    z-index: 50000;
    position: fixed;
    bottom:10px;
    left:20px;

}

.productPurchasePopupContainer {
    width:100%;
    height:65px;
    line-height:14px;
}

 <div className={classes.productPurchasePopup}>
 
 
            <div className={classes.productPurchasePopupContainer}>    
              <div className={classes.productPurchaseImageWrapper}>
                  <a href={itemDetails.product_url_path} >
                     <img width='120' height='70' border='0' src={itemDetails.product_image_url} />
                   </a>
               </div>
               <div className={classes.productPurchaseText}> 
                   <span className={classes.salesPopupTitle}> Someone in  {" " + locArr[0]+", "+locArr[1]+" " } just bought for</span> 
                   <span class="sales-popup-price"> Only { " " +itemDetails.product_price}!</span>
              </div>
            </div>  
           

          </div>

Answer 1

您需要做的第一件事是使用屬性position: fixed在您的 css 中設置 div，您希望將其固定在屏幕底部而不是頁面。 使用top和right屬性調整您希望它top right 。

另外，給它一個類，您將在代碼中使用 javascript 更改該類，以隱藏特定的<div> <div className="no-display">div fixed at bottom</div>

現在出現在 javacript 中，您可以在其中使用 setTimeout 函數為該特定函數在每次計時器熄滅時添加不顯示類名。

setTimeout 的資源： https ://www.w3schools.com/jsref/met_win_settimeout.asp 注意：您的站點每次都在處理中，因為您將在循環中使用 setTimeout。