Перейти к содержимому


Модальное Окно Вместо Перехода На Страницу


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 11

#1 Stas_Y

Stas_Y

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 548 сообщений

Отправлено 25 Сентябрь 2015 - 19:21



#2 Alekseys

Alekseys

    Активный участник

  • Модераторы
  • 2 355 сообщений

Отправлено 25 Сентябрь 2015 - 19:28

Здравствуйте. Опишите более подробно, что Вы желаете сделать.

#3 Stas_Y

Stas_Y

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 548 сообщений

Отправлено 25 Сентябрь 2015 - 19:30

Сделать вылетающее окно (форма входа/регистрации) в место перехода на страницу входа


Например: http://vladmaxi.net/...v-html-css.html (форма 9)

#4 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 788 сообщений

Отправлено 26 Сентябрь 2015 - 05:04

В шаблоне HTML найдите:
<!-- ЛК -->
								<div class="block lk">
								  <div class="block-title">
										  <a href="{USER_LOGIN_URL}">Вход/Регистрация</a>
								  </div></div>
замените на:
<!-- ЛК -->
								<div class="block lk">
								  <div class="block-title">
										  <a href="#">Вход/Регистрация</a>
								  </div>
		  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 account">
{% IF FORM_NOTICE %}<div class="{% IF FORM_NOTICE_IS_GOOD %}success{% ELSE %}warning{% ENDIF %}">{FORM_NOTICE | nl2br}</div>{% ENDIF %}
   
  <form action="{USER_LOGIN_URL}" method="post" class="clientForm">
	<input type="hidden" name="hash" value="{HASH}" />
	<input type="hidden" name="from" value="{FROM}" />
   
	<div class="row">
	  <div class="col-md-6 col-sm-6 col-xs-12 login">
		<div class="form-box login-form">
		  <h3 class="title">Постоянным покупателям</h3>
			<p>Если вы уже имеете аккаунт у нас, пожалуйста, входите.</p>
			<div class="form-list">
			  <label for="email" class="required">E-mail: <em>*</em></label>
			  <div class="input-box">
				<input type="text" name="form[sites_client_mail]" value="{FORM_SITES_CLIENT_MAIL}" id="email"  maxlength="255" class="input-text email" />
			  </div>
			  <label for="sites_client_pass" class="required">Пароль: <em>*</em></label>
			  <div class="input-box">
				<input type="password" id="sites_client_pass" name="form[sites_client_pass]" value="{FORM_SITES_CLIENT_PASS}" maxlength="50" minlength="6" class="input-text" onkeyup="checkCapsWarning(event)" onfocus="checkCapsWarning(event)" onblur="removeCapsWarning()"/>
				  {% IFNOT user_agent_ie %}
					<div class="showPassBlock"><a href="#" rel="Скрыть пароль" class="showPass jsAction">Показать пароль</a></div>
				  {% ENDIF %}
				  <div id="caps_lock">
					<span class="icon-warning"></span><br/>
					<strong>Caps Lock включен.</strong><br/>
					<span>Пароль может быть введен неверно.</span>
				  </div>
			  </div>
			</div>
			<div class="buttons">
			  <button type="submit" class="button" title="Login" name="send" id="send2">Войти</button>
			  <a href="{USER_RECOVERY_URL}" class="button forgot">Забыли пароль?</a>
			  <p class="required clearfix"><em>*</em> Обязательные поля</p>
			</div>
		  </div>
	  </div>
	  <div class="col-md-6 col-sm-6 col-xs-12 login">
		<div class="info-box">
		  <h3 class="title">Зарегистрировать аккаунт</h3>
		  <p>Зарегистрировавшись в нашем магазине, Вы сможете оформлять заказы быстрее, просматривать и отслеживать Ваши заказы, хранить адреса доставки и многое другое.</p>
		  <div class="buttons">
			<a class="button button-link redirect" rel="{USER_REGISTER_URL}">Зарегистрироваться</a>
		  </div>
		</div>
	  </div>
	</div>
  </form>
</div>
		 </div>

В main.css найдите:
.header-top .header-top-right .lk {background: url('{ASSETS_IMAGES_PATH}LK.png') no-repeat 15px 12px #34495E;padding: 18px 18px 12px 50px;color: #fff;height: 42px;margin-left: 1px;}

после него пропишите:
.header-top .header-top-right .lk .account {
display:none;
position: absolute;
background-color: #FFF;
left: 0px;
top: 42px;
box-shadow: 1px 1px 5px #ccc;
}
.header-top .header-top-right .lk .account.active{
display:block;
}

В конец main.js пропишите:
$(function(){
$('.header-top .header-top-right .lk .block-title').click(function(){
  $('.header-top .header-top-right .lk .account').toggleClass('active');
});
});


#5 Stas_Y

Stas_Y

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 548 сообщений

Отправлено 26 Сентябрь 2015 - 05:42

Ну почти)))

Прикрепленные изображения

  • Безымянный.jpg


#6 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 788 сообщений

Отправлено 26 Сентябрь 2015 - 05:45

В main.css найдите:
.header-top .header-top-right .lk {
	color: #FFF;
}
после него пропишите:
.header-top .header-top-right .lk .account {
	color: #000;
}


#7 Stas_Y

Stas_Y

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 548 сообщений

Отправлено 26 Сентябрь 2015 - 05:50

чет нет такой)

#8 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 788 сообщений

Отправлено 26 Сентябрь 2015 - 05:54

311 строка:
.header-top .header-top-right .lk {background: url('{ASSETS_IMAGES_PATH}LK.png') no-repeat 15px 12px #34495E;padding: 18px 18px 12px 50px;color: #fff;height: 42px;margin-left: 1px;}


#9 Stas_Y

Stas_Y

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 548 сообщений

Отправлено 26 Сентябрь 2015 - 05:58

Крутяк!) отодвинуть от левого края?))
Поменять цвет при наведении у кнопки зарегистрироваться?)

#10 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 788 сообщений

Отправлено 26 Сентябрь 2015 - 06:11

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

В main.css найдите:
.header-top .header-top-right .lk .account {
		color: #000;
}
после него пропишите:
.header-top .header-top-right .lk .account .button-link:hover {
	background: #F79242;
	color: #fff;
	border-color: #fff;
}


#11 Stas_Y

Stas_Y

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 548 сообщений

Отправлено 26 Сентябрь 2015 - 06:17

Отступы с двух сторон лучше)

#12 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 788 сообщений

Отправлено 26 Сентябрь 2015 - 06:27

В main.css после:
.header-top .header-top-right .lk .account.active {
	display: block;
}
пропишите:
.header-top .header-top-right .lk .account.active .clientForm {
	width: 70%;
	margin: 0px auto;
}





Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных