Как создать блок после выделенного текста?

Question

Есть функция которая получает выделенный на странице текст:

$('*').on('mouseup', function() {
        let mytext = getSelectedText();
    console.log( mytext );
});

var getSelectedText = function() {
    let text = '';
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection) {
        text = document.selection.createRange().text;
    }
      
  return text; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>I won't beg for your love: it's laid Safely to rest, let the earth settle... Don't expect my jealous letters Pouring in to plague your bride. But let me, nevertheless, advise you: Give her my poems to read in bed, Give her my portraits to keep - it's wise to Be kind like that when newly-wed.</p>

Я хочу сделать чтобы после того как текст был выделен, чтобы в конце выделения создавался блок, в котором я размещу информацию.

Примерно так:

Буду благодарен за помощь!

Answer 1

Создайте блок и например кнопку его закрытия <div class="block"> Я блок с текстом <div class="close">X</div></div> и задайте этим элементам нормальное позиционирование, т.е. самому блоку absolute, а кнопке закрытия например relative и не забудьте скрыть этот элемент в CSS display: none
там где слушаете маус ап, проверьте, приходит ли что-то в mytext, чтобы этот блок не появлялся при простом клике if(mytext !== '') и если да, получите координаты мыши после выделения текста

let a = e.clientX+'px';
let b = e.clientY+'px';

Отрисуйте по ним блок, вернув ему display в 'block'

Всё вроде бы.

БЛОГ НА HUSL

Как создать блок после выделенного текста?

Ответы (1 шт):