屏幕上的中央跨度，不是div？

-3

我想做一個簡單的圖像庫，其中跨度打開鼠標點擊（順便說一句，我也apreciate幫助），並顯示放大的圖像中心不是在其父div，但在整個屏幕上。屏幕上的中央跨度，不是div？

在此先感謝

2016-11-30 Robert Renke

母體爲一體的元件。 – Borna

您需要爲您的問題添加[mcve]。沒有人會調試圖像。 – j08691

你可以看看如何通過JavaScript和CSS在屏幕上創建一個覆蓋它需要一些HTML結構和操作，但是內容在W3School覆蓋[http://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp] 。下面列出了來自頁面的代碼片段。雖然不完全符合您的願望，但這是一個理念和實施，可以讓您滿足您的確切需求。

<!DOCTYPE html> 
 
<html> 
 
<style> 
 
body { 
 
    margin: 0; 
 
    font-family: 'Lato', sans-serif; 
 
} 
 

 
.overlay { 
 
    height: 100%; 
 
    width: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: rgb(0,0,0); 
 
    background-color: rgba(0,0,0, 0.9); 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
} 
 

 
.overlay-content { 
 
    position: relative; 
 
    top: 25%; 
 
    width: 100%; 
 
    text-align: center; 
 
    margin-top: 30px; 
 
} 
 

 
.overlay a { 
 
    padding: 8px; 
 
    text-decoration: none; 
 
    font-size: 36px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
} 
 

 
.overlay a:hover, .overlay a:focus { 
 
    color: #f1f1f1; 
 
} 
 

 
.overlay .closebtn { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 45px; 
 
    font-size: 60px; 
 
} 
 

 
@media screen and (max-height: 450px) { 
 
    .overlay a {font-size: 20px} 
 
    .overlay .closebtn { 
 
    font-size: 40px; 
 
    top: 15px; 
 
    right: 35px; 
 
    } 
 
} 
 
</style> 
 
<body> 
 

 
<div id="myNav" class="overlay"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
    <div class="overlay-content"> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
    </div> 
 
</div> 
 

 
<h2>Fullscreen Overlay Nav Example</h2> 
 
<p>Click on the element below to open the fullscreen overlay navigation menu.</p> 
 
<p>In this example, the navigation menu will slide in, from left to right:</p> 
 
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> 
 

 
<script> 
 
function openNav() { 
 
    document.getElementById("myNav").style.width = "100%"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("myNav").style.width = "0%"; 
 
} 
 
</script> 
 
     
 
</body> 
 
</html>

來源

2016-11-30 03:06:14 ioneyed

屏幕上的中央跨度，不是div？

回答

相關問題