Как сделать всплывающий блок при выделении текста?

Question

Павел @mrusklon

Не получается? Яростно гугли!

Как сделать всплывающий блок при выделении текста?

есть у меня сайт , я на нем храню код , сделал кнопку для быстрого копирования кода в один клик , но хочется сделать еще удобнее , вижу вот такой пример

на сайте www.zenpen.io , как сделать чтоб при выделении появлялся .. не важно что , просто чтоб возле курсора div или span или еще что

Вопрос задан более трёх лет назад
1988 просмотров

Комментировать

Подписаться 12 Оценить Комментировать

Решения вопроса 1

10 комментариев

Пригласить эксперта

Ответы на вопрос 2

2 комментария

12 комментариев

Johny Smith @Olek1

разве нельзя никак посмотреть исходники на самом сайте www.zenpen.io?

Написано более трёх лет назад
Павел @mrusklon Автор вопроса

ну так есть проверка , if (text != '') , если выделено пусто то нечего не произойдет

Написано более трёх лет назад
Johny Smith @Olek1

ну так есть проверка , if (text != '') , если выделено пусто то нечего не произойдет

а на сайте www.zenpen.io в каком файле и как отсутствие тултипа прописано?

почемуто думал что он всегда гдето есть, просто скрывается както invisible, и в нужный момент становится visible

Написано более трёх лет назад
Павел @mrusklon Автор вопроса

Olek1, ну вы не путайте теплое с мягким , там целый редактор с огромным функционалом

Написано более трёх лет назад
Johny Smith @Olek1

mrusklon, логично думать что в ui.js www.zenpen.io/js/ui.js ?

Написано более трёх лет назад

Johny Smith @Olek1

mrusklon,

Это не оно?

function onOverlayClick( event ) {

		if ( event.target.className === "overlay" ) {
			removeOverlay();
		}
	}

	function removeOverlay() {
		
		overlay.style.display = "none";
		wordCountBox.style.display = "none";
		descriptionModal.style.display = "none";
		saveModal.style.display = "none";
		
		if ( document.querySelectorAll('span.activesave' ).length > 0) {
			document.querySelector('span.activesave').className = '';
		}

		saveFormat='';
	}

	return {
		init: init
	}

я не программист, просто интересно найти в коде это, очень понравился вопрос

Написано более трёх лет назад

Rinat Valiullov @4reddy

не работает проверка на пустую строку, я смотрел исходники

Написано более трёх лет назад
Rinat Valiullov @4reddy

Olek1, вот сам не знаешь, а мне советуешь)))

Написано более трёх лет назад
Rinat Valiullov @4reddy

короче я пробывал isCollapsed, но это не работает. Типо нажимаешь в другую область и тултип пропадает, ан нет, не выходит

Написано более трёх лет назад
Rinat Valiullov @4reddy

Написано более трёх лет назад
Johny Smith @Olek1

вот сам не знаешь, а мне советуешь)))

Rinat Valiullov, я не советую, поставил же знаки вопроса что означало что это тоже вопрос, я такой же самый как и ты, к тому же я указал что я вообще не прогер, мне просто понравился очень понравился этот вопрос, и тоже стало интересно, и сам спрашиваю)))) на чём всё закончилось, нашлось это событие скрытия тултипа?

Написано более трёх лет назад
Rinat Valiullov @4reddy

Olek1, вот сижу туплю, пока нет. но уже просветление появляется. Вот если бы автор появился и нормально объяснил все было бы здорово!
Там думаю объект Selection, и с ним надо играться (с его свойствами и методами)ю Вот не получается пока. Читаю спеку, разбираюсь.
Да мне тоже понравилось. Как на медиуме - прикольно

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

CSS

+1 ещё

Простой
Bootstrap, как затемнить картинку?
- 1 подписчик
- час назад
- 31 просмотр
0

ответов
JavaScript

+3 ещё

Простой
Почему приходят пустые данные с формы на почту?
- 1 подписчик
- час назад
- 37 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как при помощи js создать поле дополнительных ингридиентов?
- 1 подписчик
- 12 часов назад
- 64 просмотра
0

ответов
JavaScript

+1 ещё

Средний
Как в Next.js закешировать изображение без build?
- 1 подписчик
- 14 часов назад
- 27 просмотров
0

ответов
JavaScript

Простой
Как поставить лайк на все комментарии видео в тикток?
- 1 подписчик
- 21 час назад
- 135 просмотров
2

ответа
JavaScript

Простой
Как нажать на все блоки с данным классом на странице с помощью JS?
- 1 подписчик
- 21 час назад
- 98 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как повторить такую же анимацию?
- 2 подписчика
- 22 часа назад
- 290 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как задать img источник из svg inline?
- 1 подписчик
- 23 часа назад
- 109 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Смена стилей шапки сайта при скролле к определенному блоку? Стили должны применяться при скролле до блока и отменяться за его пределами?
- 1 подписчик
- вчера
- 59 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как сформировать маску, используя регулярное выражение?
- 1 подписчик
- вчера
- 76 просмотров
2

ответа
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Middle JavaScript Developer

AppsTrain.io

от 80 000 до 180 000 ₽

Небольшое приложение реакт. Корзина для интернет магазина

26 апр. 2024, в 12:34

5000 руб./за проект

Разработка AR приложения для наложения ресниц (прикреплено ТЗ)

26 апр. 2024, в 12:28

1500 руб./в час

Нужно добавить цель на кнопки

26 апр. 2024, в 12:22

500 руб./за проект

Answer 1 · 2017-09-04 12:21:57

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

    $('.класс у которого происходит выделение').on('mouseup', function(){
        var text = getSelectedText();
        if (text != ''){
            alert('действие при выделении');
        }
    });

тадамс :)