I have implemented code that triggers pop-up boxes at the bottom of the screen when a user clicks on a name from a list displayed on the top right corner of the screen.
<!doctype html>
<html>
<head>
<title>Facebook Style Popup Design</title>
<style>
@media only screen and (max-width : 540px)
{
.chat-sidebar
{
display: none !important;
}
.chat-popup
{
display: none !important;
}
}
// More CSS styling...
</style>
<script>
// JavaScript functions for managing the pop-ups
</script>
</head>
<body>
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=qnimate" id="_carbonads_js"></script>
<!-- HTML markup for displaying user names -->
</body>
</html>
Now, I am seeking to modify the functionality to display only one user name and one corresponding pop-up box in the bottom right corner. The pop-up box should close when the user clicks anywhere outside of it.
How can I implement this?
Note: I haven't provided a jsfiddle, but by copying and pasting the code into an HTML file on your machine, you can run it in your browser successfully.