• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создаем модальное окно при помощь CSS (Как самостоятельно создать модальное окно на CSS)
Создаем модальное окно при помощь CSS
Kosten
Дата: Понедельник, 2019-01-28, 04:24 | Сообщение 1
Администраторы
Сообщений:24185
Награды: 56


В материале в подробностях разберем как самому создать адаптивное модальное окно, что будет на чистой стилистике css, Как выстроить самостоятельно простое модальное окно, которое будет корректно работать на сайте или блоге. Как оказалось в этом не чего сложного нет, зато потом самостоятельно можно красиво оформить под свой дизайн это окно.

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

Это для того, чтоб вызвать окно, где по клику оно появится, и по всем сторонам станет светло темный фон. Ведь модальные или всплывающие окно не теряет своей популярности и всегда остается актуальным элементом интерфейса современных интернет сайтов.



И так начнем самого каркаса.

HTML

Код
<div id="openblesnages" class="blesnages">
  <div class="ganization-bakausines">
    <div class="educatonal_neavutons">
      <div class="desanfras-tructure">
        <h3 class="tureubles-unagem">Название zornet.ru</h3>
        <a href="#close" title="Close" class="close">×</a>
      </div>
      <div class="blesnages-body">    
        <p>Здесь содержимое материала</p>
      </div>
    </div>
  </div>
</div>


Переходим к стилистике, здесь все по стандарту и не чего лишнего нет.

CSS

Код
.blesnages {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1050;
    opacity: 0;
    -webkit-transition: opacity 200ms ease-in;
    -moz-transition: opacity 200ms ease-in;
    transition: opacity 200ms ease-in;
    pointer-events: none;
    margin: 0;
    padding: 0;
}

.blesnages:target {
    opacity: 1;
   pointer-events: auto;
    overflow-y: auto;
}

.ganization-bakausines {
    position: relative;
    width: auto;
    margin: 10px;
}
@media (min-width: 576px) {
  .ganization-bakausines {
      max-width: 500px;
      margin: 30px auto;
  }
}

.educatonal_neavutons {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    outline: 0;
}
@media (min-width: 768px) {
  .educatonal_neavutons {
      -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
      box-shadow: 0 5px 15px rgba(0,0,0,.5);
  }
}

.desanfras-tructure {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #eceeef;
}
.tureubles-unagem {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 1.25rem;
    font-weight: 500;
}

.close {
    float: right;
    font-family: sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    text-decoration: none;
}

.close:focus, .close:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .75;
}

.blesnages-body {
  position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 15px;
    overflow: auto;
}


Осталось разместить код для вызова.

Код
<a href="#openblesnages">Открыть модальное окно</a>


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

Демонстрация
Прикрепления: 1670826.png(24.0 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создаем модальное окно при помощь CSS (Как самостоятельно создать модальное окно на CSS)
  • Страница 1 из 1
  • 1
Поиск: