Технический сбой

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

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


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

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

Поскольку так же не знаю что именно нужно предоставить вам для того, чтобы понять суть проблемы, то прикрепляю содержимое 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 - -

Поменяй
width:400px

на
display: none; width:400px

Lunotroll
Юзер

Lunotroll - -

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

maks
Юзер

maks - -

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

Lunotroll
Юзер

Lunotroll - -

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

Lunotroll
Юзер

Lunotroll - -

$(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 - -

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

Lunotroll
Юзер

Lunotroll - -

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

Lunotroll
Юзер

Lunotroll - -

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

maks
Юзер

Lunotroll
Юзер

Lunotroll - -

Писал <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 - -

#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 - -

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

Lunotroll
Юзер

Lunotroll - -

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

maks
Юзер

maks - -

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

Lunotroll
Юзер

Lunotroll - -

{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 - -

{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 - -

HELP ME!

Lunotroll
Юзер

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]	

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

наверх