Регистрация во всплывающем окне

radrigo · 25 мая

Здравствуйте.

Подскажите пожалуйста, как сделать регистрацию во всплывающем окне, как на сайте dle-news.ru?

Заранее признателен за подсказку!

dds · 25 мая

1 час назад, radrigo сказал:

Здравствуйте.

Подскажите пожалуйста, как сделать регистрацию во всплывающем окне, как на сайте dle-news.ru?

Заранее признателен за подсказку!

Вот в этой теме на форуме посмотрите. Там вроде тем же вопросом задавались. Но тема осталась не раскрытой ввиду того, что ответ пользователь дал в личку спрашивающему.

VGreen · В понедельник в 07:36

26.05.2025 в 00:09, radrigo сказал:

Здравствуйте.

Подскажите пожалуйста, как сделать регистрацию во всплывающем окне, как на сайте dle-news.ru?

Заранее признателен за подсказку!

День добрый, я не смог тогда реализовать регистрацию с reCAPTCHA, а только с использованием стандартной (GD2)

Вот код

<form
				method="post"
				id="register-form-box"
				tabindex="500"
				action="/index.php?do=register"
				class="main-registr"
			>
				<div class="enter-form__title">создайте свою учетную запись</div>
				<div class="form">
					<label class="form__item" for="registration-login">
						<input
							type="text"
							name="name"
							id="registration-login"
							class="form__input"
							placeholder=" "
							required
						/>
						<span class="form__label">Введите желаемый логин</span>
					</label>
					<div id="result-registration" class="result-registration"></div>
					<label class="form__item" for="main-email">
						<input
							type="text"
							name="email"
							id="main-email"
							class="form__input"
							placeholder=" "
							required
						/>
						<span class="form__label">Введите ваш E-Mail</span>
					</label>
					<label class="form__item" for="main-password1">
						<input
							type="password"
							name="password1"
							id="main-password1"
							class="form__input"
							placeholder=" "
							required
						/>
						<span class="form__label">Введите ваш пароль</span>
					</label>
					<label class="form__item" for="main-password2">
						<input
							type="password"
							name="password2"
							id="main-password2"
							class="form__input"
							placeholder=" "
							required
						/>
						<span class="form__label">Повторите ваш пароль</span>
					</label>
				</div>
				<div id="register-captcha" class="main-registr__captcha">
					<a
						onclick="reload(); return false;"
						href="#"
						title="Кликните на изображение чтобы обновить код, если он неразборчив"
					>
						<span id="dle-captcha" class="main-registr__captcha-img">
							<img
								src="/engine/modules/antibot/antibot.php"
								alt="Кликните на изображение чтобы обновить код, если он неразборчив"
								width="160"
								height="80"
							/>
						</span>
					</a>
					<span class="main-registr__captcha-desc">
						Кликните на изображение чтобы обновить код, если он неразборчив
					</span>
					<div class="form">
						<label class="form__item" for="main_sec_code">
							<input
								type="text"
								name="sec_code"
								id="main_sec_code"
								class="form__input"
								placeholder=" "
								required
							/>
							<span class="form__label">Введите код с картинки</span>
						</label>
					</div>
				</div>
				<div class="checkbox main-registr__rules">
					<input
						class="custom-checkbox"
						type="checkbox"
						id="reg-rules"
						name="required"
						value="1"
						required
					/>
					<label for="reg-rules">
						Я принимаю
						<a href="/" class="link-green">
							пользовательское соглашение
						</a>
						и подтверждаю, что ознакомлен и согласен с
						<a href="/" class="link-green">политикой конфиденциальности</a>
						данного сайта
					</label>
				</div>
				<button type="submit" class="main-registr__button button-green">
					Зарегистрироваться
				</button>
				<input
					name="submit_reg"
					type="hidden"
					id="submit_reg"
					value="submit_reg"
				/>
				<input name="do" type="hidden" id="do" value="register" />
			</form>

var dle_regsearch_delay = false
$('#registration-login').on('keyup', function () {
	var inputString = $(this).val()
	if (inputString.length >= 3) {
		clearInterval(dle_regsearch_delay)
		dle_regsearch_delay = setInterval(function () {
			$.post(
				dle_root + 'engine/ajax/controller.php?mod=registration',
				{ name: inputString, user_hash: dle_login_hash },
				function (data) {
					clearInterval(dle_regsearch_delay)
					$('#result-registration').html(data)
				}
			)
		}, 500)
	} else {
		$('#result-registration').html(
			'<span style="color:#d13f3f;">Слишком короткий логин</span>'
		)
	}
})

JS код под старую версию DLE, в новой немного не корректно показывает если имя свободно

Ну и HTML код подправить придется под свой дизайн

dds · В понедельник в 11:25

Можно сделать так (основа кода взята с вашего сайта через панель разработчика):

<div class="modal-dialog"> 
	<div class="modal-content">
		<div class="modal-header">
			<h4 class="modal-title" id="loginModalLabel">Вход на сайт</h4>
		</div>
		<div class="login-panel">
			<div id="login-form" class="modal-body">
				<form method="post">
					<div><input placeholder="Логин" type="text" name="login_name" id="login_name"></div>
					<div><input placeholder="Пароль" type="password" name="login_password" id="login_password"></div>
					<div><button class="btn btn-default" onclick="submit();" type="submit" title="Войти">Войти</button></div>
					<input name="login" type="hidden" id="login" value="submit">
				</form>
				<hr class="hrinf">
				<div class="modal-soc login-soc"><a href="https://oauth.vk.com/authorize?client_id=4746483&amp;redirect_uri=https%3A%2F%2Fgusev-online.ru%2Findex.php%3Fdo%3Dauth-social%26provider%3Dvk&amp;scope=offline%2Cemail&amp;state=53ae5b38fc6537259bee32953260481d&amp;response_type=code&amp;v=5.90" target="_blank" class="soc-vk" title="Войти через ВКонтакте"><i class="icon icon-vk"></i></a><a href="https://connect.ok.ru/oauth/authorize?client_id=1120685824&amp;redirect_uri=https%3A%2F%2Fgusev-online.ru%2Findex.php%3Fdo%3Dauth-social%26provider%3Dod&amp;scope=VALUABLE_ACCESS%3BGET_EMAIL&amp;state=53ae5b38fc6537259bee32953260481d&amp;response_type=code" target="_blank" class="soc-ok" title="Войти через Одноклассники"><i class="icon icon-ok"></i></a><a href="https://oauth.yandex.ru/authorize?client_id=e5883d22dc194bbca6204ad0fd056255&amp;redirect_uri=https%3A%2F%2Fgusev-online.ru%2Findex.php%3Fdo%3Dauth-social%26provider%3Dyandex&amp;state=53ae5b38fc6537259bee32953260481d&amp;response_type=code" target="_blank" class="soc-ya" title="Войти через Yandex"><i class="icon icon-ya"></i></a><a href="https://accounts.google.com/o/oauth2/auth?client_id=940628126626-ishgqd9d0kbv4n6t9vf7gk4hu372g7ru.apps.googleusercontent.com&amp;redirect_uri=https%3A%2F%2Fgusev-online.ru%2Findex.php%3Fdo%3Dauth-social%26provider%3Dgoogle&amp;scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile&amp;state=53ae5b38fc6537259bee32953260481d&amp;response_type=code" target="_blank" class="soc-go" title="Войти через Google"><i class="icon icon-go"></i></a><a href="https://oauth.mail.ru/login?client_id=812292fb36594c148a48395815e95c35&amp;redirect_uri=https%3A%2F%2Fgusev-online.ru%2Findex.php%3Fdo%3Dauth-social%26provider%3Dmailru&amp;scope=userinfo&amp;state=53ae5b38fc6537259bee32953260481d&amp;response_type=code" target="_blank" class="soc-mail" title="Войти через Mail.ru"><i class="icon icon-mail"></i></a></div>
				<div class="login-footer"> <a href="https://gusev-online.ru/index.php?do=lostpassword">Забыли пароль?</a> <a href="javascript:void(0);" class="btn-registration" onclick="showRegistrationForm()">Регистрация</a> </div>
			</div>
			<button type="button" class="btn close" aria-label="Close"><i class="icon icon-close"></i></button>
		</div>
	<form method="post" id="register-form" style="display:none;">
            <input name="submit_reg" type="hidden" value="submit_reg">
            <input name="do" type="hidden" value="register">
            Тут будут ваши поля из шаблона registration.tpl
            <button class="register-button"  disabled="disabled" name="submit_reg" type="submit">Зарегистрироваться</button>
            <a href="javascript:void(0);" class="login-btn" onclick="showLoginForm()">Уже есть аккаунт? Войти</a>			
	</form>	
	</div>
</div>

Только классы кнопок нужно изменить на свои ( или под свой дизайн )

Либо же просто добавить имя кнопке регистрации name="submit_reg" а в <form method="post" id="register-form" style="display:none;"> добавить action="/index.php?do=register" Тоже должно работать.

JS смены форм в модальном окне:

function showRegistrationForm() {
    document.getElementById('login-form').style.display = 'none';
    document.getElementById('register-form').style.display = 'block';
    document.getElementById('loginModalLabel').textContent = 'Регистрация';
}

function showLoginForm() {
    document.getElementById('register-form').style.display = 'none';
    document.getElementById('login-form').style.display = 'block';
    document.getElementById('loginModalLabel').textContent = 'Войти на сайт';
}

Для того чтобы заработала reCAPTCHA нужно в engine/init.php добавить вывод соответствующих тегов. По такому же принципу можно также реализовать в модальном окне и "восстановление забытого пароля" . То есть 3 формы будут сменяться в одном модальном окне.

celsoft · В понедельник в 12:09

42 минуты назад, dds сказал:

Для того чтобы заработала reCAPTCHA нужно в engine/init.php добавить вывод соответствующих тегов.

Что за глупости советуете? Что делает DLE с тегами DLE? Правильно заменяет теги на HTML и JS и ничего более. А теперь возникает вопрос что мешает поставить HTML и JS сразу в шаблон? К чему эти неверные советы по правке DLE? Никаких правок DLE для этого не требуется в принципе и https://dle-news.ru яркий тому пример.

dds · В понедельник в 13:15

37 минут назад, celsoft сказал:

Что за глупости советуете? Что делает DLE с тегами DLE? Правильно заменяет теги на HTML и JS и ничего более. А теперь возникает вопрос что мешает поставить HTML и JS сразу в шаблон? К чему эти неверные советы по правке DLE? Никаких правок DLE для этого не требуется в принципе и https://dle-news.ru яркий тому пример.

Признаю свою неправоту. Так тоже работает ( документация ). Например:

<div class="h-captcha" data-sitekey="Здесь ключ" data-theme="light"></div>
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>

Либо

<div class="cf-turnstile" data-sitekey="Здесь ключ" data-theme="light"></div>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

VGreen · В понедельник в 13:20

1 час назад, dds сказал:

Тут будут ваши поля из шаблона registration.tpl

тогда справедливо сказать что надо добавить поля из registration.tpl, за исключением капчи, ее код взять с данного вашего сообщения

4 минуты назад, dds сказал:


<div class="h-captcha" data-sitekey="Здесь ключ" data-theme="light"></div>
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>

Либо


<div class="cf-turnstile" data-sitekey="Здесь ключ" data-theme="light"></div>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

и не использовать теги указанные в registration.tpl для вывода капчи

dds · В понедельник в 13:42

17 минут назад, VGreen сказал:

тогда справедливо сказать что надо добавить поля из registration.tpl, за исключением капчи, ее код взять с данного вашего сообщения

и не использовать теги указанные в registration.tpl для вывода капчи

Да именно так и делать. Всё работает корректно, я проверил.

Войти

Регистрация во всплывающем окне

Рекомендованные сообщения

radrigo 198

Ссылка на сообщение

Поделиться на других сайтах

dds 66

Ссылка на сообщение

Поделиться на других сайтах

VGreen 9

Ссылка на сообщение

Поделиться на других сайтах

dds 66

Ссылка на сообщение

Поделиться на других сайтах

celsoft 6 193

Ссылка на сообщение

Поделиться на других сайтах

dds 66

Ссылка на сообщение

Поделиться на других сайтах

VGreen 9

Ссылка на сообщение

Поделиться на других сайтах

dds 66

Ссылка на сообщение

Поделиться на других сайтах

Присоединяйтесь к обсуждению

Форум

Активность