Всплывающее окно авторизации

virtas · 29 квітня 2014

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

chukcha · 29 квітня 2014

:)

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

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

virtas · 29 квітня 2014

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

virtas · 29 квітня 2014

:)

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

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

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



        <!-- Панель с кнопками -->
        <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>

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

virtas · 29 квітня 2014

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



        <!-- Панель с кнопками -->
        <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 разбираюсь немножко а в разных функциях пока еще нет (((

chukcha · 29 квітня 2014

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

andrey24 · 30 квітня 2014

http://www.opencart.com/index.php?route=extension/extension&filter_search=ajax%20login

Вхід

Всплывающее окно авторизации

Recommended Posts

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Схожі публікації

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Important Information