Как сделать кастомный prompt?

Question

[Игорь Агарков]

Привет! Мне нужен кастомный prompt. Я двигался в сторону обычной модалки, но встал вопрос о том, как достать вернуть текст из функции, открывающей модалку. Как нативный prompt, только с моим внешим видом. Возможно это как-то сделать?

Есть еще один вариант. Открывать модалку с полем, а при клике на кнопку Ок уже делать свои грязные делишки. Но это как-то некрасиво, поэтому рассматривается как последний вариант.

Answer 1

[xmoonlight]

alertifyjs.com

https://jsfiddle.net/wjw60em3/

var a=window.prompt;
window.prompt = function (message) {
	alert('Начали!');
	return a(message,'сюда вот...');
}

alert('Вы ввели: '+prompt('Введите текст'));

Comments

[Игорь Агарков]

Понятно, это все равно что мой второй вариант, только отдельной либой.

[xmoonlight]

Игорь Агарков, можно вытащить из модального окна: передать окну-родителю значения полей через свойство window.opener в нужный объект или переменную.

[Игорь Агарков]

xmoonlight, вы с prompt дело имели? У меня есть блок в верстке, который исполняет функции всплывающего окошка. В нем есть поле. Я вызываю (открываю) это окошко функцией и мне надо как-то в функции подождать, пока пользователь введет данные и нажмет ок. Как данные достать - дело десятое.

[xmoonlight]

Игорь Агарков, добавил в ответ...

[Игорь Агарков]

xmoonlight, это обычный prompt.
Я хочу, чтобы это было вот так:

А ваш код просто выводит обычный, самый обычнй, обыкновенный промпт.

[xmoonlight]

Игорь Агарков, У меня в коде показано: как выводить через свою функцию, используя тот же синтаксис. В чем проблема создать окошко внутри функции какое хотите через JS и задизайнить так, как хотите?!
Вставлять код нужно вместо alert('Начали!');.

[Игорь Агарков]

xmoonlight, хорошо. Представим, что я сделал окошко, показал его. А дальше что? А дальше потечет кровь из глаз, потому что вы все равно выводите этот мерзопакостный промпт.

Пруф:


Вопрос можно считать закрытым, я реализовал свое окошко через коллбэк функцию, что мне и следовало сделать изначально.

P.s. Прошу прощения, если показался вам слишком надоедливым или противным. Так уж вышло...

[xmoonlight]

Игорь Агарков,

хорошо. Представим, что я сделал окошко, показал его. А дальше что? А дальше потечет кровь из глаз, потому что вы все равно выводите этот мерзопакостный промпт.

не появится он никак!
Т.к. функция заменена!

[xmoonlight]

Игорь Агарков, вместо return a(message,'сюда вот...'); пишем: return inputVar; а inputVar - это то, что Вы соберёте окошком!
Главное не вызывать реальный промпт через функцию a(...)

[Игорь Агарков]

xmoonlight, вы присваиваете промпт переменной a и вызываете ее потом. Странная ллогика

[xmoonlight]

Игорь Агарков, просто для демонстрации так сделано - меньше писать кода (без окошка и прочего).

[Игорь Агарков]

xmoonlight, у нас с вами немножко все рассинхронизировалось. Я писал ответ на ваше предпредыдущее сообщение, а получилось вот так, да.

Вопрос не в том, как заменить ФУНКЦИЮ стандартного промпта на свою ФУНКЦИЮ, а как собрать информацию своим окошком. Как в функции дождаться события клика на кнопку ОК, чтобы потом достать значение из инпута и вернуть через return?

[Игорь Агарков]

xmoonlight, пока писал додумался каждую секунду проверять, не закрыто ли окно. если закрыто - доставать информацию и возвращать ее. Но это костыль, как по мне

[xmoonlight]

Игорь Агарков, Короткий вариант без сохранения исходной/родной функции:

window.prompt = function () {
    //сюда вставляем код... 
  return inputVar;
}
var r=prompt();

[xmoonlight]

Игорь Агарков,

Как в функции дождаться события клика на кнопку ОК, чтобы потом достать значение из инпута и вернуть через return?

А разве оно само не ждёт события?
Чтобы не могли больше никуда кликнуть - нужно закрыть слоем-ширмой основной контент на странице - заблокировать, пока модальное DIV-окно открыто.
(Или я снова не угадал?!)

[Игорь Агарков]

xmoonlight, моя логика такова: по клику на кнопку я ставлю display: block до этого скрытому блоку. Это моя модалка. В ней есть немного текста, поле для ввода и кнопка ОК. Функция, которая открывает эту модалку уже завершилась (открыла и все), а я хочу, чтобы она ждала клика по кнопке ОК, вытягивала нужную информацию и отдавала ее (return). Моя проблема в том, что я не знаю, как реализовать ожидание на JS. Знаю, как на плюсах и винапи:

// Создаем событие
HANDLE event = CreateEvent(NULL, FALSE, FALSE, NULL);

// Делаем так, чтобы событие случилось (не знаю, как выразиться)
SetEvent(event);

//Бесконечно ждем, пока случится это событие
WaitForSingleObject(event, INFINITE);

Таким образом, можно было бы создать событие, а когда нажимают кнопку запускать его. Функция, открывшая окошко ждала бы, а потом доставала и возвращала информацию.

[Игорь Агарков]

xmoonlight, пока писал предыдущий пост придумал еще вариант.

//Пока открыта модалка:
window.modalOpened = true;

function wait(){
    //здесь открываем модалку
    while(window.modalOpened) {}
    // здесь достаем инормацию и возвращаем ее
}

В модалке при клике на ок ставим document.modalOpened = false

Можно поставить задержку, если будет сильно напрягать браузер.

И зачем я вообще вопрос создавал, если сам допер?

[xmoonlight]

Игорь Агарков,

Можно поставить задержку, если будет сильно напрягать браузер.

Вот это вообще Epic Fail! Никогда не делайте через таймеры и тем более, таймеры ещё больше напрягают браузер! Только по событиям всё делайте.
я не могу понять как Вы там вызываете... код хотя бы покажите.

[Игорь Агарков]

xmoonlight, что именно вызываю? Как модалку открываю?

[xmoonlight]

Игорь Агарков, ну да. код целиком, чтобы понять вообще о чём речь.
PS: вот так делают на jquery: https://stackoverflow.com/a/35196852

[Игорь Агарков]

Вот моя модалка (там еще стили к ней, но не думаю, что это важно)

<div class="modal-fade" id="field-fade" onclick="toggleDisplayNotice('field-fade');" >
	<div class="notice" onclick="event.stopPropagation()">
		<div class="modal-content">
			<span id="field-text"></span><br />
			<input class="lightField smallField" />
			<div class="textCenterer">
				<div class="darkBtn smallBtn noFloat" onclick="toggleDisplayNotice('field-fade');" >Ok</div>
			</div>
		</div>
	</div>
</div>

// По умолчанию блок скрыт (display: none)
function toggleBlockDisplay(modalFade) {
	var disp = modalFade.css("display");
	if (disp == "block") modalFade.css("display", "none");
	else if (disp == "none") modalFade.css("display", "block");
}
// установка display: block и плавное появление
function toggleBlockOpasity(modalFade) {
	var opas = modalFade.css("opacity");
	
	if (opas == 1) {
		modalFade.css("opacity", 0);
		setTimeout(function() {
			toggleBlockDisplay(modalFade);
		}, 200);
	}
	else if (opas == 0) {
		toggleBlockDisplay(modalFade);
		setTimeout(function() {
			modalFade.css("opacity", 1);
		}, 100);
	}
}

Сейчас я сделал вариант с использованием коллбек-функции

function showField(text, callback) { //текст, который нужно вставить в модалку и функцию, которую нужно вызвать при клике на ОК
	$("#field-text").html(text);
	toggleDisplayNotice('field-fade');
	$("#field-fade .darkBtn").click(callback);
}

Работает. Правда некрасиво все это, нелогично получается. На да ладно, терпимо. А если переделаю, будет нормально.

[Игорь Агарков]

xmoonlight,

PS: вот так делают на jquery: https://stackoverflow.com/a/35196852

упростить и получится вариант с коллбек-функцией.

[xmoonlight]

Игорь Агарков, Вот на jquery UI:
1. документация: https://jqueryui.com/dialog/#modal-form
2. пример с ожиданием в 5 секунд и закрытием: https://stackoverflow.com/a/35196852