Hello,
How can I create similar 3 horizontal dots (circled in red), as shown in the below image where when user clicks it will pop-up "edit", "info" ?
Hi RichardSa,
Refer below html.
HTML
<html> <head> <meta charset="utf-8" /> <title></title> <style> .dot { height: 3px; width: 3px; background-color: #000000; border-radius: 50%; display: inline-block; font-weight: bold; } </style> </head> <body> <center> <h3>Click dots to open popup</h3> <div id="dvDetails" style="text-align:center; width:40px;background-color:#CDD4DA;height:25px;border-radius:3px;"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> </center> <div id="MyPopup" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> × </button> <h4 class="modal-title">Greetings</h4> </div> <div class="modal-body"> Welcome to ASPSnippets.com </div> <div class="modal-footer"> <input type="button" id="btnClosePopup" value="Close" class="btn btn-danger" data-dismiss="modal" /> </div> </div> </div> </div> <script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script> <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script> <link rel="stylesheet" media="screen" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' /> <script type="text/javascript"> $(function () { $("#dvDetails").click(function () { $("#MyPopup").modal("show"); }); }); </script> </body> </html>
Demo
© COPYRIGHT 2025 ASPSnippets.com ALL RIGHTS RESERVED.