» »

Модальное окно KroPus при помощи CSS


Модальное окно KroPus при помощи CSS

Сегодня разберем, как при помощи CSS создать красивое модальное окно, где не будет JavaScript или Jquery и всяких архивов и библиотек, все очень просто делается и по установке, здесь можно сказать, что самое простое. Но дизайн у него как можно видеть темный и обводом синем, но изначально был красный, что пришлось переделать. Если брать само оригинальное модальное окно с чего и было переделано, то явно можно подумать, что это совершенно разные продукты материала.

Тут нужно сказать, что дизайн и стилистика, зависит от вам, по умолчанию код идти будет с обратной связью, уже рабочей для системы uCoz. Но также проверил его и по плееру, что для просмотра, все отлично, только ширину нужно подогнать, ту которая нужна. Здесь видим что красная кнопка, сделал просто так, чтоб понятно было, что все регулируется, но идет основа в темной гамме.

Простое модальное окно с помощью css

Начнем его устанавливать.

Каркас кода:

Установка происходит, там где вам нужно видеть надпись, чтоб вызвать, некоторые делают кнопку.

Код
<a href="#openModal2" class="info">Клик сюда</a>
<div id="openModal2" class="modalDialog">
  <div>
  <a href="#close" title="Close" class="close1">X</a>

<!-- v_loop --><div class="v_loop">
<div class="v_top"><b>Связь с Администратором</b></li></div>
<div class="v_cont"><span style="font-size: 8pt;">$MFORM_1$</span></div>
</div><!-- /v_loop -->
   
  </div>
</div>


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

Теперь прописываем стили в CSS.

Код
/*Оформление*/
.modalDialog {
  position: fixed;
  /* font-family: Arial, Helvetica, sans-serif; */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
  z-index: 99999;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  display: none;
}
/*Открытие*/
.modalDialog:target {
  display: block;
  pointer-events: auto;
}
   
.modalDialog > div {
  width: 500px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: #333333;
  border: 2px solid #33B4FF;
}
/*Закрытие окна*/
.close1 {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}
   
.close:hover { background: #ff9933; }  
#send_info{color:#ffffff;font-size: 16px;}


Не правда, что не так сложно, хочу заметить, что в стилях уже прописан шрифт, и вы можете его сменить.

01.05.2016 Просмотров: 420 Комментарий: (8)

Поделиться в социальных сетях

Материал разместил

Комментарий: 8
Сопрано
Сопрано 01.05.2016 01:151
0
С того модального окна с которого был переделано это окно, точно не скажу, но ставил, и там видео у меня сразу установилось как нужно.
Kosten
Kosten 01.05.2016 01:202
0
Наверно, больше всего, сразу было выставлена ширина больше, и потому плеер установился нормально. Так как только ширина автоматом идет основном, но на других нужно настраивать. А этот тип окна, все больше в интернете встречается и отзывы у него не плохие и сама установка, легче чем информер установить.
Сопрано
Сопрано 01.05.2016 01:263
0
Больше всего выставлена была, так как ставил после одного скрипта, что шире делал. Но что оно простое модальное окно, тут согласен, вообще редко найдешь на одном CSS, чтоб скриптов с ним валом не шло, а то вверх сайта поставь на некоторых и потом в корень сайта закинь, а эффект точно такой же, но если только появление самого окна другое.
tsakonter
tsakonter 01.05.2016 01:284
0
Костен, окно та на видео с брендом подобрал.)
Kosten
Kosten 01.05.2016 01:325
0
Но что поделать, если зашел на ютуб, и почти везде он, но решил, а почему бы и нет.)

Сафрон
Сафрон 01.05.2016 01:406
0
С видео один только минус, когда оно идет и окно отключаешь, то все же оно идет и на отключенном.
Kosten
Kosten 01.05.2016 04:217
0
Но это много можно заметить на модальных окнах, что есть такой косяк с произведением видео.
feliksteg
feliksteg 02.05.2016 15:098
0
Эта переделка больше понравилась, хотя от оригинала можно посмотреть, что стили совершенно по другому переписан.
avatar