使用圆形菜单打开工具提示或弹出窗口

Question

这是带有CSS和JS的简单HTML。 带有图标的圆形菜单：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet"href=
"https://cdnjs.cloudfare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

</head>

<body>

<nav class="circular-menu">

<div class="circle">
<a href="#" class="fa fa-home fa-2x"></a>
<a href="#" class="fa fa-facebook fa-2x"></a>
<a href="#" class="fa fa-instagram fa-2x"></a>
<a href="#" class="fa fa-linkedin fa-2x"></a>
<a href="#" class="fa fa-skype fa-2x"></a>
<a href="#" class="fa fa-map-marker fa-2x"></a>
<a href="#" class="fa fa-envelope fa-2x"></a>
<a href="#" class="fa fa-user fa-2x"></a>
</div>
<a href="" class="menu-button fa fa-bars fa-2x"></a>

</nav>

<script  src="js/index.js"></script>

</body>
</html>

它工作正常，但是我想要的是用户单击图标时的onclick弹出窗口或onclick工具提示。 Onclick弹出窗口或onclick工具提示必须响应。

Answer 1

这是你想要的吗？ 很脏但是有个主意

 var items = document.querySelectorAll('.circle a'); for(var i = 0, l = items.length; i < l; i++) { items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%"; items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%"; } document.querySelector('.menu-button').onclick = function(e) { e.preventDefault(); document.querySelector('.circle').classList.toggle('open'); } $('.demo').tooltip({ trigger: 'click', placement: 'bottom' }); function setTooltip(btn, message) { btn.tooltip('hide') .attr('data-original-title', message) .tooltip('show'); } function hideTooltip(btn) { setTimeout(function() { btn.tooltip('hide'); }, 1000); } // Clipboard var clipboard = new Clipboard('.demo'); clipboard.on('success', function(e) { var btn = $(e.trigger); setTooltip(btn, 'Copied'); hideTooltip(btn); }); 

 @import "https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"; body { background: url() no-repeat top center fixed; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: 338px 151px; background-position: top center; max-width:100%; height:auto; } .circular-menu { width: 250px; height: 250px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .circle { width: 250px; height: 250px; opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .open.circle { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } .circle a { text-decoration: none; color: black; display: block; height: 40px; width: 40px; line-height: 70px; margin-left: -15px; margin-top: -40px; position: absolute; } .circle a:hover { color: gray; } .menu-button { position: absolute; top: calc(50% - 30px); left: calc(50% - 30px); text-decoration: none; text-align: center; color: #444; border-radius: 50%; display: block; height: 40px; width: 40px; line-height: 40px; padding: 10px; background: #dde; } .menu-button:hover { background-color: #eef; } 

 <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> </head> <body> <nav class="circular-menu"> <div class="circle"> <a href="#" data-clipboard-text="1" class="demo fa fa-home fa-2x"></a> <a href="#" data-clipboard-text="1" class="demo fa fa-facebook fa-2x"></a> <a href="#" data-clipboard-text="1" class="demo fa fa-instagram fa-2x"></a> <a href="#" data-clipboard-text="1" class="demo fa fa-linkedin fa-2x"></a> <a href="#" data-clipboard-text="1" class="demo fa fa-skype fa-2x"></a> <a href="#" data-clipboard-text="1" class="demo fa fa-map-marker fa-2x"></a> <a href="#" data-clipboard-text="1" class="demo fa fa-envelope fa-2x"></a> <a href="#" data-clipboard-text="1" class="demo fa fa-user fa-2x"></a> </div> <a href="" class="menu-button fa fa-bars fa-2x"></a> </nav> <script src="js/index.js"></script> </body> </html>