Open Popup When Click Inside Canvas Circle

I want to open a popup when the user clicks inside the Circle, could you advise me how to do this please? Here is the code for the circle:

Solution 1:

I made a popup box when clicking the canvas tab area. But if clicking the circle then use this reference link http://www.w3schools.com/tags/tag_map.asp

You should add the belowline inside canvas tag

onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';

i.e.,

<canvas id="myCanvas" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';" width="300" height="150" style="border:1px solid #d3d3d3;" >
Your browser does not support the HTML5 canvas tag.</canvas>

and create two div with id as 'light' and 'fade'

<divid="light"class="white_content"><ahref = "javascript:void(0)"onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a><p>Content goes here</p></div><divid="fade"class="black_overlay"onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"></div>

and write the css like below.

<styletype="text/css">.black_overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}

.white_content {
display: none;
position: fixed;
top: 10%;
left: 25%;
width: 50%;
height: 500px;
padding: 16px;
border: 13px solid #808080;
background-color: white;
z-index:1002;
overflow: auto;
}
    </style>

Share