// popup window
$('.show_popup').click(function() {
    var popup_id = $('#' + $(this).attr("rel"));
    $(popup_id).show();
    $('.overlay_popup').show();
})
$('.overlay_popup').click(function() {
    $('.overlay_popup, .popup').hide();
})
$('.envelope').click(function () {
    $('.envelope').hide();
    $('.close').show();
})
$('.close').click(function () {
    $('.close').hide();
    $('.envelope').show();
})

<div class="content">
<!-- icon element on the screen-->
<div class="show_popup blue-circle" rel="popup1">
    <i class="fa  fa-envelope-o envelope" aria-hidden="true"></i>
    <i class="fa fa-times close" aria-hidden="true"></i>
</div>
</div>

<div class="overlay_popup"></div>

<!-- popup element -->
<div class="popup" id="popup1">
    <div id="text"></div>
</div>

.popup,
.overlay_popup {
display: none;
}
.close {
display: none;
}
.overlay_popup {
position: fixed;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
z-index: 2;
background: rgba(0, 0, 0, 0);
}

.popup {
position: fixed;
z-index: 3;
left: 87%;
top: 93%;
transform: translate(-50%, -50%);
max-width: 200px;
padding: 20px;
background: #fff;
z-index: 1;
}

.blue-circle {
position: fixed;
left: 85%;
top: 90%;
width: 40px;
height: 40px;
background-color: #03a9f5;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
text-align: center;
z-index: 2;
}
.blue-circle i {
color: #ecfeff;
font-size: 25px;
margin-top: 7px;
}