Перейти к содержанию

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

Помогите оформить окно авторизации в стандартном шаблоне default, может у кого есть мысль по этому поводу или код,
хочу чтобы при нажатии ВОЙТИ  всплывало окно или выдвигалось.
вот пример -----   http://ruseller.com/lessons/les1415/demo/index.html 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

:)

И что не получается?

За вас написать?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

......................................................................

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

:)

И что не получается?

За вас написать?

Я уже все перепробовал у меня есть и код --

 



        <!-- Панель с кнопками -->
        <div class="main">
            <div class="panel">
                <a href="#login_form" id="login_pop">Войти</a>
                <a href="#join_form" id="join_pop">Регистрация</a>
            </div>

        </div>

        <!-- Форма №1 для модального окна -->
        <a href="#x" class="overlay" id="login_form"></a>
        <div class="popup">
            <h2>Здравствуй, Гость!</h2>
            <p>Вводи свой псевдоним и пароль</p>
            <div>
                <label for="login">Псевдоним</label>
                <input type="text" id="login" value="" />
            </div>
            <div>
                <label for="password">Пароль</label>
                <input type="password" id="password" value="" />
            </div>
            <input type="button" value="Войти" />

            <a class="close" href="#close"></a>
        </div>

        <!-- popup form #2 -->
        <a href="#x" class="overlay" id="join_form"></a>
        <div class="popup">
            <h2>Регистрация</h2>
            <p>Нужно о себе кое-что рассказать</p>
            <div>
                <label for="email">Псевдоним (email)</label>
                <input type="text" id="email" value="" />
            </div>
            <div>
                <label for="pass">Пароль</label>
                <input type="password" id="pass" value="" />
            </div>
            <div>
                <label for="firstname">Имя</label>
                <input type="text" id="firstname" value="" />
            </div>
            <div>
                <label for="lastname">Фамилия</label>
                <input type="text" id="lastname" value="" />
            </div>
            <input type="button" value="Регистрация" />   или   <a href="#login_form" id="login_pop">Войти</a>

            <a class="close" href="#close"></a>
        </div>

и стили 

 

/*****************************************/
.main {
    width: 270px;
    height: 50px;
}
.panel {
    background-color: #444;
    height: 34px;
    padding: 10px;
}
.panel a#login_pop, .panel a#join_pop {
    border: 2px solid #aaa;
    color: #fff;
    display: block;
    float: right;
    margin-right: 10px;
    padding: 5px 10px;
    text-decoration: none;
    text-shadow: 1px 1px #000;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
a#login_pop:hover, a#join_pop:hover {
    border-color: #eee;
}
.overlay {
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 1;

    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}
.overlay:target {
    visibility: visible;
    opacity: 1;
}
.popup {
    background-color: #fff;
    border: 3px solid #fff;
    display: inline-block;
    left: 50%;
    opacity: 0;
    padding: 15px;
    position: fixed;
    text-align: justify;
    top: 40%;
    visibility: hidden;
    z-index: 200;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;

    -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;

    -webkit-transition: opacity .5s, top .5s;
    -moz-transition: opacity .5s, top .5s;
    -ms-transition: opacity .5s, top .5s;
    -o-transition: opacity .5s, top .5s;
    transition: opacity .5s, top .5s;
}
.overlay:target+.popup {
    top: 50%;
    opacity: 1;
    visibility: visible;
}
.close {
    background-color: rgba(0, 0, 0, 0.8);
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: -15px;
    width: 30px;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-size: 24px;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
    background-color: rgba(64, 128, 128, 0.8);
}
.popup p, .popup div {
    margin-bottom: 10px;
}
.popup label {
    display: inline-block;
    text-align: left;
    width: 120px;
}
.popup input[type="text"], .popup input[type="password"] {
    border: 1px solid;
    border-color: #999 #ccc #ccc;
    margin: 0;
    padding: 2px;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
}
.popup input[type="text"]:hover, .popup input[type="password"]:hover {
    border-color: #555 #888 #888;
}

я разобрался тут что к чему catalog/view/theme/ ваша тема /template/account/login.tpl  --- 

 

<div class="right">
      <h2><?php echo $text_returning_customer; ?></h2><!--Войти в Личный Кабинет:-->
      <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data"><!--сылка активности-->
        <div class="content">
          <p><?php echo $text_i_am_returning_customer; ?></p><!--Войти в Личный Кабинет:-->
          <b><?php echo $entry_email; ?></b><br /><!--email-->
          <input type="text" name="email" value="<?php echo $email; ?>" /><!--блок логин-->
          <br />
          <br />
          <b><?php echo $entry_password; ?></b><br /><!--паспорт-->
          <input type="password" name="password" value="<?php echo $password; ?>" /><!--блок пароль2-->
          <br />
          <a href="<?php echo $forgotten; ?>"><?php echo $text_forgotten; ?></a><br /><!---->
          <br />
          <input type="submit" value="<?php echo $button_login; ?>" class="button" /><!--кнопка-->
          <?php if ($redirect) { ?>
          <input type="hidden" name="redirect" value="<?php echo $redirect; ?>" /><!---->
          <?php } ?>
        </div>
      </form>
    </div>
  </div>

все крутил вертел и не как (((((  

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Я уже все перепробовал у меня есть и код --

 



        <!-- Панель с кнопками -->
        <div class="main">
            <div class="panel">
                <a href="#login_form" id="login_pop">Войти</a>
                <a href="#join_form" id="join_pop">Регистрация</a>
            </div>

        </div>

        <!-- Форма №1 для модального окна -->
        <a href="#x" class="overlay" id="login_form"></a>
        <div class="popup">
            <h2>Здравствуй, Гость!</h2>
            <p>Вводи свой псевдоним и пароль</p>
            <div>
                <label for="login">Псевдоним</label>
                <input type="text" id="login" value="" />
            </div>
            <div>
                <label for="password">Пароль</label>
                <input type="password" id="password" value="" />
            </div>
            <input type="button" value="Войти" />

            <a class="close" href="#close"></a>
        </div>

        <!-- popup form #2 -->
        <a href="#x" class="overlay" id="join_form"></a>
        <div class="popup">
            <h2>Регистрация</h2>
            <p>Нужно о себе кое-что рассказать</p>
            <div>
                <label for="email">Псевдоним (email)</label>
                <input type="text" id="email" value="" />
            </div>
            <div>
                <label for="pass">Пароль</label>
                <input type="password" id="pass" value="" />
            </div>
            <div>
                <label for="firstname">Имя</label>
                <input type="text" id="firstname" value="" />
            </div>
            <div>
                <label for="lastname">Фамилия</label>
                <input type="text" id="lastname" value="" />
            </div>
            <input type="button" value="Регистрация" />   или   <a href="#login_form" id="login_pop">Войти</a>

            <a class="close" href="#close"></a>
        </div>

и стили 

 

/*****************************************/
.main {
    width: 270px;
    height: 50px;
}
.panel {
    background-color: #444;
    height: 34px;
    padding: 10px;
}
.panel a#login_pop, .panel a#join_pop {
    border: 2px solid #aaa;
    color: #fff;
    display: block;
    float: right;
    margin-right: 10px;
    padding: 5px 10px;
    text-decoration: none;
    text-shadow: 1px 1px #000;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
a#login_pop:hover, a#join_pop:hover {
    border-color: #eee;
}
.overlay {
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 1;

    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}
.overlay:target {
    visibility: visible;
    opacity: 1;
}
.popup {
    background-color: #fff;
    border: 3px solid #fff;
    display: inline-block;
    left: 50%;
    opacity: 0;
    padding: 15px;
    position: fixed;
    text-align: justify;
    top: 40%;
    visibility: hidden;
    z-index: 200;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;

    -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;

    -webkit-transition: opacity .5s, top .5s;
    -moz-transition: opacity .5s, top .5s;
    -ms-transition: opacity .5s, top .5s;
    -o-transition: opacity .5s, top .5s;
    transition: opacity .5s, top .5s;
}
.overlay:target+.popup {
    top: 50%;
    opacity: 1;
    visibility: visible;
}
.close {
    background-color: rgba(0, 0, 0, 0.8);
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: -15px;
    width: 30px;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-size: 24px;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
    background-color: rgba(64, 128, 128, 0.8);
}
.popup p, .popup div {
    margin-bottom: 10px;
}
.popup label {
    display: inline-block;
    text-align: left;
    width: 120px;
}
.popup input[type="text"], .popup input[type="password"] {
    border: 1px solid;
    border-color: #999 #ccc #ccc;
    margin: 0;
    padding: 2px;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
}
.popup input[type="text"]:hover, .popup input[type="password"]:hover {
    border-color: #555 #888 #888;
}

я разобрался тут что к чему catalog/view/theme/ ваша тема /template/account/login.tpl  --- 

 

<div class="right">
      <h2><?php echo $text_returning_customer; ?></h2><!--Войти в Личный Кабинет:-->
      <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data"><!--сылка активности-->
        <div class="content">
          <p><?php echo $text_i_am_returning_customer; ?></p><!--Войти в Личный Кабинет:-->
          <b><?php echo $entry_email; ?></b><br /><!--email-->
          <input type="text" name="email" value="<?php echo $email; ?>" /><!--блок логин-->
          <br />
          <br />
          <b><?php echo $entry_password; ?></b><br /><!--паспорт-->
          <input type="password" name="password" value="<?php echo $password; ?>" /><!--блок пароль2-->
          <br />
          <a href="<?php echo $forgotten; ?>"><?php echo $text_forgotten; ?></a><br /><!---->
          <br />
          <input type="submit" value="<?php echo $button_login; ?>" class="button" /><!--кнопка-->
          <?php if ($redirect) { ?>
          <input type="hidden" name="redirect" value="<?php echo $redirect; ?>" /><!---->
          <?php } ?>
        </div>
      </form>
    </div>
  </div>

все крутил вертел и не как (((((  

 очень нужно хочу научится создавать интернет магазины вот в html и css разбираюсь немножко а в разных функциях пока еще нет (((

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Еще бы почитать про js скрипты, в данном случае с использованием jquery

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Похожий контент

    • От kin208
      900.00 руб
      Скачать/Купить дополнение


      Авторизация через Вконтакте, Facebook, Одноклассники, Twitter, Gmail.com, Mail.ru
      Модуль авторизации через социальные сети:
      - ВКонтакте
      - Одноклассники (работает только на сайтах где установлен SSL-сертификат)
      - Twitter
      - Facebook (работает только на сайтах где установлен SSL-сертификат)
      - Google (gmail.com)
      - Mail.ru
      - Яндекс
      - Steam
      - Instagram
       
      В модуле реализована авторизация:
      - либо через приложение соц.сетей,
      - либо через Логинзу.
       
      Авторизация через Логинзу позволит: 
      - подключить авторизацию кирилических доменов через Twitter
      (Одноклассники и FaceBook - к сожалению через Логинзу не работают (по состоянию на 12.11.2018).
      То есть для их подключения в любом случае нужен SSL-сертификат.)
       
      Также авторизация через Логинзу
       
      ВОЗМОЖНОСТИ МОДУЛЯ:
      1) Модуль отображается на страницах авторизации, регистрации, оформления заказа
       
       
      2) Администратор может включить добор данных в модальном окне (Имя, Фамилия, E-mail, Телефон, Компания, Почтовый индекс, Страна, Регион, Город, Адрес)

       

       
      3)  Администратор может выбирать формат отображения данных (крупные значки в линию, крупные значки квадратом, мелки значки в линию).

       
      4)  Администратор может включить боковой виджет с формой авторизации

       
      5) Администратор может включить модальное окно авторизации которое будет отображаться пользователю поверх страницы

       
      6) Модуль собирает списки ретаргетинга ВКонтакте и Facebook которые можно скачать и настроить рекламу по ним

      -----
      Модуль совместим с модулем Simple
      -----
      Есть версия для VQMOD в варианте для Опенкарт 1.5
      -----
      Демо-сайт:
      https://softpodkluch.ru/socnetauth2#link-tab-demo
      -----
      Инструкция по установке:
      https://softpodkluch.ru/instruction-socnetauth2
       
      Добавил kin208 Добавлено 04.12.2012 Категория Социальные сети Системные требования Сайт разработчика https://softpodkluch.ru Старая цена Метод активации Без активации Ioncube Loader Нет OpenCart 3.0
      2.3
      2.2
      2.1
      2.0
      1.5.6.4
      1.5.6.3
      1.5.6.2
      1.5.6.1
      1.5.6
      1.5.4.1
      1.5.3.1 ocStore 3.0
      2.3
      2.2
      2.1
      1.5.5.1.2
      1.5.5.1.1
      1.5.5.1
      1.5.4.1.2
      1.5.4.1.1
      1.5.4.1
      1.5.3.1
      1.5.2.1
      1.5.1.3 OpenCart.Pro, ocShop Не проверялось  
    • От Blackseabreathe
      Привет!
       
      Как сделать форму входа/реги в модальном окне? 
      Ocstore 2.3
       
      Модули не работают почему-то у меня (скачивал два с marketplace)
       
    • От kin208
      Модуль авторизации через социальные сети:
      - ВКонтакте
      - Одноклассники (работает только на сайтах где установлен SSL-сертификат)
      - Twitter
      - Facebook (работает только на сайтах где установлен SSL-сертификат)
      - Google (gmail.com)
      - Mail.ru
      - Яндекс
      - Steam
      - Instagram
       
      В модуле реализована авторизация:
      - либо через приложение соц.сетей,
      - либо через Логинзу.
       
      Авторизация через Логинзу позволит: 
      - подключить авторизацию кирилических доменов через Twitter
      (Одноклассники и FaceBook - к сожалению через Логинзу не работают (по состоянию на 12.11.2018).
      То есть для их подключения в любом случае нужен SSL-сертификат.)
       
      Также авторизация через Логинзу
       
      ВОЗМОЖНОСТИ МОДУЛЯ:
      1) Модуль отображается на страницах авторизации, регистрации, оформления заказа
       
       
      2) Администратор может включить добор данных в модальном окне (Имя, Фамилия, E-mail, Телефон, Компания, Почтовый индекс, Страна, Регион, Город, Адрес)

       

       
      3)  Администратор может выбирать формат отображения данных (крупные значки в линию, крупные значки квадратом, мелки значки в линию).

       
      4)  Администратор может включить боковой виджет с формой авторизации

       
      5) Администратор может включить модальное окно авторизации которое будет отображаться пользователю поверх страницы

       
      6) Модуль собирает списки ретаргетинга ВКонтакте и Facebook которые можно скачать и настроить рекламу по ним

      -----
      Модуль совместим с модулем Simple
      -----
      Есть версия для VQMOD в варианте для Опенкарт 1.5
      -----
      Демо-сайт:
      https://softpodkluch.ru/socnetauth2#link-tab-demo
      -----
      Инструкция по установке:
      https://softpodkluch.ru/instruction-socnetauth2
       
    • От NNA
      Скачать/Купить дополнение


      Show Password (Показать-скрыть пароль) для OC 2.x
      Отображает и снова прячет пароли на страницах регистрации, авторизации и изменения пароля.
      Давно известно, что на самом деле толком не повышающая безопасности мода прятать вводимые символы под "звёздочками" приводит к потере клиентов в е-коммерции из-за целого ряда неудобств, среди которых:
      Нет контроля набора букв, особенно новых и сложных паролей. Ошибки, отрицательные эмоции. В случае несовпадения паролей в полях невозможно определить, какое из них содержит ошибку, а какое - верный пароль. Невозможно элементарно скопировать набранный пароль для сохранения в любимый блокнот\контейнер\etc. Ну и так далее. Столкнулся с полным отсутствием решения этой давно наболевшей проблемы для пользователей. Дарю сообществу, пусть приносит пользу (и расширение, и сообщество ).
      Должно работать на:
      любых грамотных шаблонах, использующих стандартный вывод ошибок при вводе пароля. Проверено на нескольких имеющихся. любой версии OC2 со стандартным шаблоном. Проверено от 2.2.х. В случае несовместимости шаблона - правки минимальны, но по просьбе могу внести в публикуемый код.
      Тестирование (и сообщения о работоспособности) на OCStore и других сборках также привествуются.
      Плюсы:
      Не требует загрузки файлов (значит, и нет потенциальных проблем с ftp). Не требует JQuery. Минимизированный код (не сжатый! т.е. без потери удобства чтения-правок). Известные минусы: не обнаружено.
      Установка:
      Распаковать zip-архив! Установочный файл - xml из архива. Установить через стандартное меню (либо скопировать в папку /system/ сайта) В обоих случаях обновить кэш модификаторов. Добавил NNA Добавлено 10.01.2017 Категория Прочее Системные требования Исправный OCMOD Метод активации Без активации Ioncube Loader Нет OpenCart 2.3
      2.2
      2.1
      2.0 ocStore 2.3
      2.2
      2.1 OpenCart.Pro, ocShop Не проверялось  
    • От xprolance
      300.00 руб
      Скачать/Купить дополнение


      Всплывающие окна
      C помощью данного модуля можно легко создавать и показывать всплывающие окна посетителям при первом и последующих заходах на сайт. 
       
      Например:
      - информационные окна
      - окно с акцией
      - окно с подтверждением возраста (или любые с принятием условий)
      - окно уведомление о использовании cookie
      - окно при попытке ухода посетителя с сайта (только в opencart 2 и выше).
       
      Оформлять и заполнять окна информацией можно через визуальный редактор или в режиме HTML-кода. Окна адаптивные.
       
      Окно отправляется в сон после:
      клика по крестику закрытия после перехода по любой ссылке, размещённой в нём после положительного принятия условий  
      Можно создавать несколько окон в одном или разных макетах, каждое со своим содержанием и настройками.
       
      Для работы модуля необходимо php 5.5 и выше + включённый ionCube Loader на хостинге
      Если вы не знаете состояние этих параметров, то скачайте модификатор и следуйте инструкции.
       
      Ключ активации можно получить через личное сообщение, указав сайт, где будет использоваться модуль.
      Тестовый сайт должен быть поддоменом основного сайта или папка на локальном сервере без точки в названии.
       
       
       
       
       
      История версий
       
      Добавил xprolance Добавлено 11.07.2016 Категория Модули Системные требования php 5.5 и выше, ionCube Loader Сайт разработчика http://project.bplaced.net/ Старая цена Метод активации По запросу в ЛС Ioncube Loader Требуется OpenCart 3.0
      2.3
      2.2
      2.1
      2.0
      1.5.6.4
      1.5.6.3
      1.5.6.2
      1.5.6.1
      1.5.6
      1.5.4.1
      1.5.3.1 ocStore 3.0
      2.3
      2.1
      1.5.5.1.2
      1.5.5.1.1
      1.5.5.1
      1.5.4.1.2
      1.5.4.1.1
      1.5.4.1
      1.5.3.1 OpenCart.Pro, ocShop Opencart.pro 2.3
      Opencart.pro 2.1
      OcShop 2.0.3.х
      OcShop 1.5.6.4.х  
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.