In the absence of jQuery:
<style>
.hidden {display:none}
</style>
<script>
function showPopup() {
document.getElementById("popupWindow").classList.remove("hidden");
}
</script>
<span class="profile"><img src="https://i.sstatic.net/o2hxa.png" onclick="showPopup()"></span>
<div id="popupWindow" class="hidden">
<div>
<div>Name: Name Surname</div>
<div>Code: code123</div>
</div>
<div>
<input type="submit" value="Sign Out" class="signOut"/>
</div>
</div>
Utilizing jQuery:
<style>
.hidden {display:none}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script>
$(function() {
$(".profile img").click(function() {
$("#popupWindow").show();
});
});
</script>
<span class="profile"><img src="https://i.sstatic.net/o2hxa.png"></span>
<div id="popupWindow" class="hidden">
<div>
<div>Name: Name Surname</div>
<div>Code: code123</div>
</div>
<div>
<input type="submit" value="Sign Out" class="signOut"/>
</div>
</div>
Implementing jQuery UI:
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/flick/jquery-ui.css" type="text/css">
<style>
.hidden {display:none}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>
<script>
$(function() {
$(".profile img").click(function() {
$("#popupWindow").dialog({
title: "My Popup Title",
width: 600,
modal: true,
resizable: false
});
});
});
</script>
<span class="profile"><img src="https://i.sstatic.net/o2hxa.png"></span>
<div id="popupWindow" class="hidden">
<div>
<div>Name: Name Surname</div>
<div>Code: code123</div>
</div>
<div>
<input type="submit" value="Sign Out" class="signOut"/>
</div>
</div>