Так оно вроде и работает, как вам надо
<style>
.b-popup {
position:fixed;
top:20px;
left:20px;
border:1px solid black;
background-color:white;
opasity:0; }
.back { background-color:grey;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
PopUpHide();
});
function PopUpShow(){
$("#popup1").show();
$(".b-container").toggle("back");
}
function PopUpHide(){
$("#popup1").hide();
// $(".b-container").toggle("back");
}
</script>
<div class="b-container">
Sample Text
<a href="javascript:PopUpShow()">Show popup</a>
</div>
<div class="b-popup" id="popup1">
<div class="b-popup-content">
Text in Popup
<a href="javascript:PopUpHide()">Hide popup</a>
</div>
</div>