Yotube like comment-Показывать ссылку поверх textarea, когда пользователь пытается добавить комментарий

Question

Я работаю над приложением asp.net. И я ищу способ показать ссылку поверх текстовой области, когда пользователь пытается добавить комментарий, если пользователь не авторизован.

Я получил эту идею из комментариев к видео на Youtube. Если вы не соединились, они показывают ссылку, в которой вам нужно войти, чтобы иметь возможность добавить комментарий.будет полезен фрагмент кода jquery.

Заранее спасибо.

С наилучшими пожеланиями, Rachid

Answer 1

Вы можете сделать это с помощью оверлея, который вы поместили поверх текстовой области на mouseenter . Тогда нужно было бы просто спрятать его на 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'
    });
});

Вы можете увидеть это в действии здесь .