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

[Kasper]

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

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

 

[Sipsb]

Плохая идея . Кроме раздражения, такие  «всплывалки» ничего не вызывают.

[qwert]

Поддержу @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);
}