Перейти к публикации
IPS Invision Community

Всплывающее окно выбора языка


Kasper
 Поделиться
Подписчики 3
Перейти к решению Решение от qwert,

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

Ребят всем привет! Будьте добры подскажите как можно реализовать такое всплывающее окно выбор языка при входе на форум.
Заранее благодарю за помощь.

Скрытый текст

1.jpg.711857fe9985d079cddcc599e1a29297.jpg

 

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

Поддержу @Sipsb окна pop-up многих раздражают. Если нужно, вот пример. Взял с первого попавшегося сайта не проверял!!!

<div id="l2b_modal_back" class="l2b_hidden l2b_visible" style="display: block;">
        <div class="l2b_modal_-wrp">
            <div id="modal_def" class="l2b_modal_def l2b_modal_it l2b_hidden l2b_visible animated zoomIn">
                <h3 class="l2b_modal_title">Choose language</h3>
                <p class="l2b_modal_p" id="l2b_modal_warning">
                  Language / Язык
                </p>
                <div class="l2b_modal_btn-wrp">
                    <a href="/" class="l2b_modal_btn btn-usa">
                      <img src="ССЫЛКА на картинку" alt="USA">&nbsp;&nbsp;English (USA)
                  </a>
                    <a href="/" class="l2b_modal_btn btn-rus">
                      <img src="ССЫЛКА на картинку" alt="RU">&nbsp;&nbsp;Русский (RU)
                  </a>
                </div>
            </div>
        </div>
    </div>

Это в Custom.css добавить

.l2b_modal_-wrp{
  min-height:100vh;
  width:100%;
  max-width:100%;
  overflow-y:auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.l2b_modal_def{
  max-width:400px;
  width:100%;
  position:relative;
  background-color:#fff;
  color:#000;
  box-sizing:border-box;
  padding:0;
  z-index:100;
  overflow:auto;
}
.l2b_hidden{
  transition: .3s;
  visibility:hidden;
  opacity:0;
}
.l2b_visible{
  visibility:visible;
  opacity:1;
}
#l2b_modal_back{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  box-sizing:border-box;
  overflow-y:auto;
  background-color:rgba(0,0,0,0.8);
  z-index:9999;
  display:none;
}
.l2b_modal_it{
  border:3px solid rgba(0, 0, 0, 0.24);
  background-color:rgb(34, 36, 41);
  color:rgb(211, 201, 206);
  border-radius:10px;
  max-width:500px;
  box-shadow:0px 12px 25px rgba(0, 0, 0, 0.7 );
}
.l2b_modal_title{
  margin-bottom: 0;
  background-size:100% 100%;
  padding:13px 10px 14px 25px;
  font-size:14px;
  font-weight:300;
}
.l2b_modal_p{
  text-align:center;
  line-height:20px;
  padding:4px 0 0 0;
}
.l2b_modal_btn-wrp{
  display:flex;
  justify-content:space-around;
  flex-wrap:wrap;
}
.l2b_modal_btn{
  display:inline-flex;padding:5px 15px;
  border:2px solid rgba(49, 65, 82, 0.69);
  background-color:rgba(39, 76, 114, 0.35);
  color:rgb(255, 255, 255);
  cursor:pointer;
  border-radius:5px;
  transition: .3s all;
  margin:10px;
  min-width:160px;
  text-align:center;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.l2b_modal_btn:hover{
  background-color:rgb(45,81,111);
}

 

  • Нравится 1
  • Спасибо 1
Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться
×
×
  • Создать...
Вверх
Вверх