Create horizontal dots using CSS in ASP.Net

RichardSa
 
on Aug 31, 2021 01:32 AM
Sample_468584.zip
2366 Views

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" ?

https://i.imgur.com/y5BUoXv.png

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Aug 31, 2021 01:47 AM

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">
                        &times;
                    </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