彈出指向按鈕CSS

我在窗體中有一個按鈕。當我按下按鈕時，我想執行我的CSS腳本。 CSS代碼顯示一個彈出框。彈出指向按鈕CSS

目標

我們的目標是，當我點擊按鈕它激發了其將指向我的按鈕，我的CSS彈出。

編輯

我設法展示的onClick彈出，但現在的彈出框是遠離按鈕。

<!DOCTYPE html> 
 
<html> 
 

 
<style> 
 

 
    #myDIV { 
 
    width: 100%; 
 
    padding: 5px 0 0 0 ; 
 
    text-align: center; 
 
    background-color: transperent; 
 
    margin-top:8px; 
 
} 
 

 

 

 
    body {background:#26A9E1;padding:40px} 
 

 
    #p {background:white; -webkit-border-radius: 50px; 
 
    -moz-border-radius: 10px; 
 
    border-radius: 0px; width:550px; height:150px} 
 

 
    #pointer{border:solid 20px transparent;border-bottom-color:#fff;position:absolute;margin:-205px 00px 00px 10px;} 
 
    
 
    
 

 
</style> 
 

 

 

 
<body> 
 

 

 

 
<button onclick="myFunction()">Try it</button> 
 

 
<div id="myDIV"> 
 
    <p id="p"></p> 
 
    <div id="pointer"></div> 
 
</div> 
 

 

 
<script> 
 
function myFunction() { 
 
    var x = document.getElementById('myDIV'); 
 
    if (x.style.display === 'none') { 
 
     x.style.display = 'block'; 
 
    } else { 
 
     x.style.display = 'none'; 
 
    } 
 
} 
 
</script> 
 
    
 
</body> 
 
</html>

來源

2017-04-12 taji01

除非你是在鼠標懸停效果之後，否則你不能用CSS來做到這一點。如果你想使用點擊來顯示/隱藏彈出窗口，你需要JS。 – amflare

嗨，我試圖添加JS，但我也沒有成功。 @amflare – taji01

然後顯示該代碼並尋求幫助。 – amflare

我想我是能夠實現你想要什麼用純CSS和沒有JavaScript的我做了的jsfiddle：

編輯：這裏有一個版本使用javascript：https://jsfiddle.net/7f1L9ycr/3/

以下是沒有javascript的版本https://jsfiddle.net/7f1L9ycr/2/

HTML：

<body> 
<button id="p" type="button">Click Me! 
    <div class="container"> 
    <p></p> 
    <div id="pointer"></div> 
    </div> 
</button> 
</body>

CSS：

body {background:#26A9E1;padding:40px; position: relative;} 

p {background:white; -webkit-border-radius: 50px; 
-moz-border-radius: 10px; 
border-radius: 0px; width:550px; height:150px} 

#pointer{border:solid 20px transparent;border-bottom-color:#fff;position:absolute;margin:-205px 00px 00px 10px;} 

.container { 
    display: none; 
    position: absolute; 
    top: 25px; 
} 

#p { 
    position: relative; 
} 

#p:focus .container { 
    display: block; 
}

來源

2017-04-12 21:29:41 philr

感謝您使用/不使用JavaScript的兩種版本。 – taji01

CSS pseudo classes之外，你不能真正控制下的網頁太多的互動邏輯 - 這就是爲什麼要使用JavaScript是。我在上面看到了你的答案，但我不建議你繼續嘗試走這條路，因爲很難確定什麼是「重點」。

來源

2017-04-12 21:32:06

彈出指向按鈕CSS

回答

相關問題