指向按钮 CSS 的弹出窗口

taji01 发表于 Dev

taji01

我的表单中有一个按钮。当我按下按钮时，我想执行我的 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>

菲尔

我想我能够使用纯粹的 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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。