aarka,
нужный вам css добавьте сами.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
* {
box-sizing: border-box;
}
body, html{
height: 100%;
position: relative;
}
.spoiler_body {
position: absolute;
display: none;
border: 1px solid rgba(0, 0, 0, 1);
padding: 6px 4px;
background-color: rgba(255, 255, 255, 1);
}
.spoiler_body.open{
display: inline-block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".button-origin").on("click", function() {
$(".spoiler_body").addClass("open");
});
$("body").on("click", function(event) {
$(event.target).closest(".spoiler_body, .button-origin").length || $(".spoiler_body").removeClass("open");
});
});
</script>
</head>
<body>
<div class="button-origin button">
<span>Оставить сообщение</span>
</div>
<div class="spoiler_body">Чтобы отправить сообщение необходимо войти или зарегистрироваться</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae hic rei publicae vulnera inponebat, eadem ille sanabat. Etsi qui potest intellegi aut cogitari esse aliquod animal, quod se oderit? Ut proverbia non nulla veriora sint quam vestra dogmata. Duo Reges: constructio interrete. Nos paucis ad haec additis finem faciamus aliquando; Utinam quidem dicerent alium alio beatiorem! Iam ruinas videres. Et ais, si una littera commota sit, fore tota ut labet disciplina. Quod quidem nobis non saepe contingit. Est enim tanti philosophi tamque nobilis audacter sua decreta defendere. </p>
</body>
</html>