Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Шаблоны (TPL) » Как настроить модельное окно входа?

Как настроить модельное окно входа?


     09.09.2017    Модельное окно входа    Шаблоны (TPL), Стили (CSS), Ламерские вопросы    2115

вопрос
Доброго времени суток. Каюсь, сайт купил и только начинаю разбираться во всех тонкостях, однако пытаюсь поставить новый шаблон и будучи некомпетентным в некоторых вопросах сталкиваюсь с многочисленными проблемами и вот одна из них. Проблема заключается в том, что окно авторизации на сайт, которое должно появляться по нажатии кнопки "Вход" висит на экране сразу с загрузкой сайта (расположение окна имеет мало значимости, поскольку уж подравнять то его у меня рук хватит, поэтому говорю непосредственно за модульную составляющую окна).
Как настроить модельное окно входа?

Поскольку так же не знаю что именно нужно предоставить вам для того, чтобы понять суть проблемы, то прикрепляю содержимое login.tpl, где прописано содержимое окна и кнопки и часть style.css, отвечающую за login
[not-group=5]
 <a class="btn-enter"  rel="leanModal" href="#logindialog">Профиль</a> <a class="btn-enter"href="{logout-link}"><b>Выход</b></a> <a href="{profile-link}" class="btn-reg">{login}</a>
<div style="display: none; width: 200px" id="logindialog" title="{login}">
 
		<div class="lcol">
			<div style="margin: 0" class="avatar"><a href="{profile-link}"><img src="{foto}" alt="{login}" /></a></div>
		</div><div class="film-item full">

 
<div class="logform" id="logindialog">
			<ul class="reset">
	[admin-link]<li><a href="{admin-link}" target="_blank"><b>Админпанель</b></a></li>[/admin-link]
				<li><a href="{addnews-link}"><b>Добавить новость</b></a></li>
				<li><a href="{pm-link}">Сообщения: ({new-pm} | {all-pm})</a></li>
				<li><a href="{profile-link}">Мой профиль</a></li>
				<li><a href="{favorites-link}">Мои закладки</a></li>
				<li><a href="{stats-link}">Статистика</a></li>
			</ul>
		</div>
		<div class="clr"></div>
 
</div></div> 
[/not-group]
[group=5]
 <a class="btn-reg" href="{registration-link}">Регистрация</a> <a class="btn-enter" rel="leanModal" href="#logindialog"><b>Войти</b></a> 
<div style="width:400px;" id="logindialog" title="Авторизация">
	<form method="post" action="">
    <div class="film-item full">

<div class="logform" id="logindialog">
			<ul class="reset">
				<li class="lfield"><label for="login_name">Логин:</label><br /><input type="text" name="login_name" id="login_name" style="padding:10px 15px; width:240px" /></li>
				<li class="lfield lfpas"><label for="login_password">Пароль (<a href="{lostpassword-link}">Забыли?</a>):</label><br /><input type="password" style="padding:10px 15px; width:240px" name="login_password" id="login_password" /></li>
				<li class="lfield lfchek"><input type="checkbox" name="login_not_save" id="login_not_save" value="1"/><label for="login_not_save">&nbsp;Чужой компьютер</label></li>
		<li class="lfield lfchek"><div class="sociallogin">
	[vk]<a href="{vk_url}" target="_blank"><img src="{THEME}/images/social/vkontakte.gif" /></a>[/vk]
	[odnoklassniki]<a href="{odnoklassniki_url}" target="_blank"><img src="{THEME}/images/social/odnoklassniki.gif" /></a>[/odnoklassniki]
	[facebook]<a href="{facebook_url}" target="_blank"><img src="{THEME}/images/social/facebook.gif" /></a>[/facebook]
	[mailru]<a href="{mailru_url}" target="_blank"><img src="{THEME}/images/social/mailru.gif" /></a>[/mailru]
	[yandex]<a href="{yandex_url}" target="_blank"><img src="{THEME}/images/social/yandex.gif" /></a>[/yandex]
	[google]<a href="{google_url}" target="_blank"><img src="{THEME}/images/social/google.gif" /></a>[/google]
</div></li>	</ul>
		</div>
<div class="loginbr3"><button class="fbutton2" onclick="submit();" type="submit" title="Войти"><span>Войти</span></button></div>
<input name="login" type="hidden" id="login" value="submit" />
</div>
</form>	</div>	
[/group]


/*---login---*/
.loginbox {
	display: block;
}
.loginbox ul.loginbox {
	float: right;
	height: 27px;
}
ul.loginbox {
	line-height: 27px;
}
ul.loginbox li {
	margin-left: 10px;
}
.loginbtn a {
	text-decoration: none;
	font-size: 1.1em;
	display: block;
	width: 66px;
	padding-bottom: 17px;
	background: url("../images/loginbtn.png") no-repeat 50% 0;
}
.loginbtn a b {
	text-align: center;
	display: block;
	cursor: pointer;
	height: 26px;
	background-color: #db143d;
}
.loginbtn a:hover {
	background-position: 50% 100%;
}
.loginbtn a:hover b {
	background-color: #f1345d;
}
.logform li.lfield {
	margin-bottom: 10px;
}
.logform li.lbtn {
	text-align: center;
}
.logform li.lfield input {
	width: 265px;
}
.logform li.lfchek input {
	width: 13px;
	border: none;
	background: none;
}
.logform li.lfchek label {
	display: inline;
	margin-bottom: 0.2em;
}


Прошу не закидывать ламера помидорами и помочь в данном начинании :)

Ответил: Lunotroll


ВОПРОС ЗАКРЫТ. Разобрался сам.
Если вдруг кому понадобится, вот правильный код:

[not-group=5]
<a href="{logout-link}" class="btn-enter">Выход</a>
<a id="loginlink" href="#logindialog" class="btn-enter"> Профиль </a>
<a href="{profile-link}" class="btn-reg">{login}</a>
<div style="display: none;" id="logindialog" title="{login}">
 		<div class="lcol">
			<div style="margin: 0" class="avatar"><a href="{profile-link}"><img src="{foto}" alt="{login}" /></a></div>
		</div><div class="film-item full">
<div class="logform">
			<ul class="reset">
	[admin-link]<li><a href="{admin-link}" target="_blank"><b>Админпанель</b></a></li>[/admin-link]
				<li><a href="{addnews-link}"><b>Добавить новость</b></a></li>
				<li><a href="{pm-link}">Сообщения: ({new-pm} | {all-pm})</a></li>
				<li><a href="{profile-link}">Мой профиль</a></li>
				<li><a href="{favorites-link}">Мои закладки</a></li>
				<li><a href="{stats-link}">Статистика</a></li>
			</ul>
		</div>
		<div class="clr"></div>
 </div></div> 
[/not-group]
[group=5]	
<a id="loginlink" href="#logindialog" class="btn-enter"> Вход </a>
<a href="{registration-link}" class="btn-reg"> Регистрация </a>
<div id="logindialog" title="Авторизация" style="display:none;">
<form method="post" action="">
<div class="loginbr">
<div class="logform">
			<ul class="reset">
				<li class="lfield"><label for="login_name">Логин:</label><br /><input type="text" name="login_name" id="login_name" style="padding:10px 15px; width:240px" /></li>
				<li class="lfield lfpas"><label for="login_password">Пароль (<a href="{lostpassword-link}">Забыли?</a>):</label><br /><input type="password" style="padding:10px 15px; width:240px" name="login_password" id="login_password" /></li>
				<li class="lfield lfchek"><input type="checkbox" name="login_not_save" id="login_not_save" value="1"/><label for="login_not_save"> Чужой компьютер</label></li>
			</ul>
		</div>
<div class="loginbr3"><button class="fbutton2" onclick="submit();" type="submit" title="Войти"><span>Войти</span></button></div>
<input name="login" type="hidden" id="login" value="submit" />
</div>
</form>	</div>		
[/group]

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

maks
Юзер

maks - 10 сентября 2017 00:06 -

Поменяй
width:400px

на
display: none; width:400px

Lunotroll
Юзер

Lunotroll - 10 сентября 2017 00:08 -

Согласен, окно пропадает со страницы, но кнопка по прежнему его не открывает

maks
Юзер

maks - 10 сентября 2017 00:12 -

А профиль открывает? Ошибка в js может, ищи logindialog

Lunotroll
Юзер

Lunotroll - 10 сентября 2017 00:13 -

Профиль тоже не открывается

Lunotroll
Юзер

Lunotroll - 10 сентября 2017 00:14 -

$(function() {

	$( "#logindialog" ).dialog({
		autoOpen: false,
		show: 'fade',
		hide: 'fade',
		resizable: false,
		width: 300
	});

	$('#btn-enter').click(function(){
		$('#logindialog').dialog('open');
		return false;
	});
});

$(function() {

	$( "#polldialog" ).dialog({
		autoOpen: false,
		resizable: false,
		width: 450
	});

	$('#polllink').click(function(){
		$('#polldialog').dialog('open');
		return false;
	});
});

$(document).ready(function(){
		$('#topmenu li.sublnk').hover(
		function() {
			$(this).addClass("selected");
			$(this).find('ul').stop(true, true);
			$(this).find('ul').show('fast');
		},
		function() {
			$(this).find('ul').hide('fast');
			$(this).removeClass("selected");
		}
	);
});

var auth_window;

$(document).ready(function(){
	$('.sociallogin a').on('click',function(){
	   var href = $(this).attr('href');
       var width  = 820;
       var height = 420;
       var left   = (screen.width  - width)/2;
       var top   = (screen.height - height)/2-100;   

       auth_window = window.open(href, 'auth_window', "width="+width+",height="+height+",top="+top+",left="+left+"menubar=no,resizable=no,scrollbars=no,status=no,toolbar=no");
       return false;
	})
});

maks
Юзер

maks - 10 сентября 2017 00:18 -

Тут не угадаешь, смотри подключен ли jquery, теги в main.tpl типа {info} и т.п

Lunotroll
Юзер

Lunotroll - 10 сентября 2017 00:22 -

Нет, jquery не подключен

Lunotroll
Юзер

Lunotroll - 10 сентября 2017 00:23 -

Были мысли попробовать через плагин "Простого добавления модельного окна" jquery, однако не дало результатов. Не осилил разобраться что, да куда

maks
Юзер

maks - 10 сентября 2017 00:25 -


Lunotroll
Юзер

Lunotroll - 10 сентября 2017 00:31 -

Писал <script type="text/javascript" src="путь_к/jquery.leanModal.min.js"></script> под {headers}.
Действовал по вот этому хаку https://s-sd.ru/blog_studio_design/prostye_modalnye_okna_s_pomowyu_jquery/
Как уже сказал безрезультатно

Lunotroll
Юзер

Lunotroll - 10 сентября 2017 00:34 -

#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}
совал в style.css как и сказано в описании к плагину, однако не разобрался с расположением вот этой части
$(function() {
    $("#trigger_id").leanModal();
});

maks
Юзер

maks - 10 сентября 2017 00:42 -

Если {headers} написан в main.tpl, то jquery уже подключен, посмотри исходный код

Lunotroll
Юзер

Lunotroll - 10 сентября 2017 00:45 -

В чем тогда проблема то?

maks
Юзер

maks - 10 сентября 2017 00:53 -

Не знаю, остальные обязательные теги проверь {AJAX} {info}

Lunotroll
Юзер

Lunotroll - 10 сентября 2017 00:57 -

{AJAX}
{AJAX}
<div class="wrapper">

	<header>
     
    <div class="header">
      <div class="center">
        <div class="headmenu"> <a href="/" title="" class="logo"><img src="{THEME}/images/logo.png" alt="" /></a>


{info}
<div class="middle">
	<div class="center">
		<div class="container">
			<main>
            <div class="content">
            
            
            <div id='dle-content'>
		
			
                <center>
                  
                    
                    
       </center>
                  <center>
                  
                </center>
			
                
                
                {info}
            {content}

            <div class="clr"></div>
                  </div>

Lunotroll
Юзер

Lunotroll - 10 сентября 2017 00:44 -

{headers}
<link rel="shortcut icon" href="{THEME}/images/favicon.ico" />
<link media="screen" href="{THEME}/style/styles.css" type="text/css" rel="stylesheet" />
<link media="screen" href="{THEME}/style/engine.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="{THEME}/js/libs.js"></script>
<script type="text/javascript" src="{THEME}/js/jquery.bxslider.js"></script>


    <script type="text/javascript">
		$(document).ready(function(){
		$(window).scroll(function () {if ($(this).scrollTop() > 500) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
		$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
		});
    </script>

А ведь действительно есть путь, не заметил его

Lunotroll
Юзер

Lunotroll - 10 сентября 2017 00:56 -

HELP ME!

Lunotroll
Юзер

Lunotroll - 10 сентября 2017 15:25 -

ВОПРОС ЗАКРЫТ. Разобрался сам.
Если вдруг кому понадобится, вот правильный код:

[not-group=5]
<a href="{logout-link}" class="btn-enter">Выход</a>
<a id="loginlink" href="#logindialog" class="btn-enter"> Профиль </a>
<a href="{profile-link}" class="btn-reg">{login}</a>
<div style="display: none;" id="logindialog" title="{login}">
 		<div class="lcol">
			<div style="margin: 0" class="avatar"><a href="{profile-link}"><img src="{foto}" alt="{login}" /></a></div>
		</div><div class="film-item full">
<div class="logform">
			<ul class="reset">
	[admin-link]<li><a href="{admin-link}" target="_blank"><b>Админпанель</b></a></li>[/admin-link]
				<li><a href="{addnews-link}"><b>Добавить новость</b></a></li>
				<li><a href="{pm-link}">Сообщения: ({new-pm} | {all-pm})</a></li>
				<li><a href="{profile-link}">Мой профиль</a></li>
				<li><a href="{favorites-link}">Мои закладки</a></li>
				<li><a href="{stats-link}">Статистика</a></li>
			</ul>
		</div>
		<div class="clr"></div>
 </div></div> 
[/not-group]
[group=5]	
<a id="loginlink" href="#logindialog" class="btn-enter"> Вход </a>
<a href="{registration-link}" class="btn-reg"> Регистрация </a>
<div id="logindialog" title="Авторизация" style="display:none;">
<form method="post" action="">
<div class="loginbr">
<div class="logform">
			<ul class="reset">
				<li class="lfield"><label for="login_name">Логин:</label><br /><input type="text" name="login_name" id="login_name" style="padding:10px 15px; width:240px" /></li>
				<li class="lfield lfpas"><label for="login_password">Пароль (<a href="{lostpassword-link}">Забыли?</a>):</label><br /><input type="password" style="padding:10px 15px; width:240px" name="login_password" id="login_password" /></li>
				<li class="lfield lfchek"><input type="checkbox" name="login_not_save" id="login_not_save" value="1"/><label for="login_not_save"> Чужой компьютер</label></li>
			</ul>
		</div>
<div class="loginbr3"><button class="fbutton2" onclick="submit();" type="submit" title="Войти"><span>Войти</span></button></div>
<input name="login" type="hidden" id="login" value="submit" />
</div>
</form>	</div>		
[/group]	

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

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

наверх