Yotube like comment - Afficher le lien sur textarea lorsque l'utilisateur essaie d'ajouter un commentaire

Question

Je travaille sur l'application asp.net.Et je suis à la recherche d'un moyen de montrer un lien sur une zone de texte lorsqu'un utilisateur essaie d'ajouter un commentaire. commenter si l'utilisateur n'est pas connecté.

J'ai cette idée de Youtube commentaires de vidéos. Si vous n'êtes pas connecté, ils montrent un lien disant que vous devez vous connecter pour pouvoir ajouter un commentaire.

Est-ce que quelqu'un a une idée de comment faire cela.Un morceau de code jquery sera utile.

Merci d'avance.

Cordialement, Rachid

Answer 1

Vous pouvez le faire avec un lien de recouvrement que vous avez placé sur la zone de texte sur mouseenter. Ensuite, il serait juste une question de se cacher sur mouseleave:

HTML

<div id="comment"> 
    <textarea rows="3" cols="20"></textarea> 
    <a class="overlay" href="" style="display: none; position: absolute;">You must login</a> 
</div> 

jQuery

$('#comment').mouseenter(function() { 
    var textarea = $(this).find('textarea'); 
    var overlay = $(this).find('.overlay'); 

    var pos = textarea.position(); 
    overlay.css({ 
     top: pos.top, 
     left: pos.left, 
     width: textarea.width(), 
     height: textarea.height(), 
     display: 'block' 
    }); 
}); 

$('#comment').mouseleave(function() { 
    var overlay = $(this).find('.overlay'); 
    overlay.css({ 
     display: 'none' 
    }); 
}); 

Vous pouvez voir in action here.