1. 首頁
  2. 問答
  3. 簡單的LightBox Javascript彈出框

簡單的LightBox Javascript彈出框

2015-09-18 70 views
2

即時通訊添加自動彈出燈箱到我的網站。簡單的LightBox Javascript彈出框

我需要能夠將它添加到我的Html頁面。我使用WordPress，但我只允許插入HTML代碼的腳本。我無法使用插件。

任何Java腳本都可以使用。我想發佈一個圖像，並在頁面上說，直到該人關閉它。但ID也喜歡圖像可以點擊

感謝

來源

2015-09-18 Irving Murillo

回答

0

如果你想要一些簡單而不使用任何插件，你將不得不使用至少一些JavaScript和CSS。

您可以在頁面中定位一個隱藏的div。當你的頁面加載時，你可以顯示它。在這個div中，你可以放置任何你想要的東西和一個元素來關閉它。

你可以在下面看到一個簡單的彈出窗口。 Javascript部分包含2個函數，打開和關閉彈出窗口。如您所見，我在頁面內容和彈出窗口之間添加了一個黑色重疊。這不是強制性的。

第二部分是簡單的CSS來定位你想要的頁面上的彈出窗口。

最後，您可以看到彈出窗口所需的HTML標記。

function showPopup() { 
 

 
    document.getElementById('blackOverlay').style.display = 'block'; 
 
    document.getElementById('popup').style.display = 'block'; 
 
    
 
} 
 

 
function closePopup() { 
 

 
    document.getElementById('blackOverlay').style.display = 'none'; 
 
    document.getElementById('popup').style.display = 'none'; 
 
    
 
}
.blackOverlay { 
 
    display:none; 
 
    background:rgba(0,0,0,.6); 
 
    position:fixed; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    height:100%; 
 
    z-index:1; 
 
} 
 

 
.popup { 
 
    display:none; 
 
    background:#fff; 
 
    position:fixed; 
 
    top:10%; 
 
    left:50%; 
 
    width:600px; 
 
    height:80%; 
 
    margin-left:-300px; 
 
    z-index:10; 
 
    border:2px solid #000; 
 
} 
 

 
.closePopup { 
 
    float:right; 
 
    font-weight:bold; 
 
    color:red; 
 
    cursor:pointer; 
 
} 
 

 
img { 
 
    max-width:100%; 
 
    max-height:100%; 
 
}
<body onload="showPopup()"> 
 
    
 
    <div> 
 
     Content behind!Content behind!Content behind!Content behind!Content behind!<br /> 
 
     Content behind!Content behind!Content behind!Content behind!Content behind!<br /> 
 
     Content behind!Content behind!Content behind!Content behind!Content behind!<br /> 
 
     Content behind!Content behind!Content behind!Content behind!Content behind!<br /> 
 
     Content behind!Content behind!Content behind!Content behind!Content behind!<br /> 
 
     Content behind!Content behind!Content behind!Content behind!Content behind!<br /> 
 
    </div> 
 
    
 
    
 
    
 
    
 
    <div id="blackOverlay" class="blackOverlay"></div> 
 
    <div id="popup" class="popup"> 
 
     <span class="closePopup" onclick="closePopup()">X</span> 
 
     <img src="http://dummyimage.com/600x400/fff/000.png" /> 
 
    </div> 
 
</body>

來源

2015-09-18 18:31:50 morgul

2 

function showPopup() { 
 

 
    document.getElementById('blackOverlay').style.display = 'block'; 
 
    document.getElementById('popup').style.display = 'block'; 
 
    
 
} 
 

 
function closePopup() { 
 

 
    document.getElementById('blackOverlay').style.display = 'none'; 
 
    document.getElementById('popup').style.display = 'none'; 
 
    
 
}
.blackOverlay { 
 
    display:none; 
 
    background:rgba(0,0,0,.6); 
 
    position:fixed; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    height:100%; 
 
    z-index:1; 
 
} 
 

 
.popup { 
 
    display:none; 
 
    background:#fff; 
 
    position:fixed; 
 
    top:10%; 
 
    left:50%; 
 
    width:600px; 
 
    height:80%; 
 
    margin-left:-300px; 
 
    z-index:10; 
 
    border:2px solid #000; 
 
} 
 

 
.closePopup { 
 
    float:right; 
 
    font-weight:bold; 
 
    color:red; 
 
    cursor:pointer; 
 
} 
 

 
img { 
 
    max-width:100%; 
 
    max-height:100%; 
 
}
<body onload="showPopup()"> 
 
    
 
    <div> 
 
     Content behind!Content behind!Content behind!Content behind!Content behind!<br /> 
 
     Content behind!Content behind!Content behind!Content behind!Content behind!<br /> 
 
     Content behind!Content behind!Content behind!Content behind!Content behind!<br /> 
 
     Content behind!Content behind!Content behind!Content behind!Content behind!<br /> 
 
     Content behind!Content behind!Content behind!Content behind!Content behind!<br /> 
 
     Content behind!Content behind!Content behind!Content behind!Content behind!<br /> 
 
    </div> 
 
    
 
    
 
    
 
    
 
    <div id="blackOverlay" class="blackOverlay"></div> 
 
    <div id="popup" class="popup"> 
 
     <span class="closePopup" onclick="closePopup()">X</span> 
 
     <img src="http://dummyimage.com/600x400/fff/000.png" /> 
 
    </div> 
 
</body>

來源

2016-07-11 13:48:04 mcpansuriya

相關問題

 相關問題