[Dilettante_Pro]

Как вариант, с тем же недостатком

<style>
.popup {
  position:fixed;
  top:40%;
  left:40%;
  display:none;
  background-color:lightgreen
}
</style>
<button id='i1' value='0'>Mess1</button>
<button id='i2' value='1'>Mess2</button>
<button id='i3' value='2'>Mess3</button>
<button id='i4' value='3'>Mess4</button>
<div class='popup'>ntcy</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
messages =['Сообщение 1','Сообщение 2','Сообщение 3','Сообщение 4'];
$('button').on( "click" , function(e) {
     e.preventDefault();
    $('.popup').css('display','block');
    $('.popup').text(messages[$(this).val()]);
       setTimeout(
            function ()
            {
                 $('body').on('click', closePopup)
            }
        );
        return false;    
});
function closePopup() {
  $('.popup').css('display','none');
  $('body').off('click', closePopup);
};

</script>