Как сделать чтобы фокус был на модальном окне и скролилось при открытии оно? А не задняя часть документа? Не через js

180

02 ноября 2019, 16:50

html, 
body { 
  height: 100%; 
  margin: 0; 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
  "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", 
  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 
} 
 
p { 
  margin: 0; 
  padding: 0; 
} 
 
.wrapper { 
  min-height: 100%; 
} 
 
.content { 
  padding-bottom: 10vh; 
} 
 
.header { 
  background-color: #d3d3d3; 
} 
 
.navbar { 
  display: flex; 
  height: 7vh; 
  justify-content: flex-end; 
 
  &__menu { 
    display: flex; 
    align-items: center; 
 
    &-item { 
      display: flex; 
      align-items: center; 
      margin-right: 2em; 
      list-style: none; 
 
      &-link { 
        text-decoration: none; 
        color: #007bff; 
        background-color: transparent; 
 
        &:hover { 
          color: #0056b3; 
          text-decoration: underline; 
        } 
      } 
    } 
  } 
} 
 
.container { 
  background-color: darkgrey; 
  width: 80%; 
  padding-right: 0.396875cm; 
  padding-left: 0.396875cm; 
  margin-right: auto; 
  margin-left: auto; 
} 
 
.footer { 
  margin-top: -10vh; 
  /*Минус Высота футера*/ 
  height: 10vh; 
  width: 100%; 
  background-color: #d3d3d3; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
 
} 
 
@media screen and (max-width: 33.866cm) { 
  .container { 
    width: 100%; 
    padding: 0 !important; 
    margin: 0 !important; 
  } 
} 
 
.modal { 
  opacity: 0; 
  visibility: hidden; 
  position: fixed; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
  text-align: left; 
  background: rgba(0, 0, 0, 0.9); 
  transition: opacity 0.25s ease; 
} 
 
.modal__bg { 
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
  cursor: pointer; 
} 
 
.modal-state { 
  display: none; 
} 
 
.modal-state:checked + .modal { 
  opacity: 1; 
  visibility: visible; 
} 
 
.modal-state:checked + .modal .modal__inner { 
  top: 0; 
} 
 
.modal__inner { 
  transition: top 0.25s ease; 
  position: absolute; 
  top: -20%; 
  right: 0; 
  bottom: 0; 
  left: 0; 
  width: 50%; 
  margin: auto; 
  overflow: auto; 
  background: #fff; 
  border-radius: 0.1cm; 
  padding: 1em 2em; 
  height: 50%; 
  resize: both; 
} 
 
.modal__close { 
  position: absolute; 
  right: 1em; 
  top: 1em; 
  width: 1.1em; 
  height: 1.1em; 
  cursor: pointer; 
} 
 
.modal__close:after, 
.modal__close:before { 
  content: ""; 
  position: absolute; 
  width: 0.05cm; 
  height: 1.5em; 
  background: #ccc; 
  display: block; 
  transform: rotate(45deg); 
  left: 50%; 
  margin: -0.079375cm 0 0 -0.02cm; 
  top: 0; 
} 
 
.modal__close:hover:after, 
.modal__close:hover:before { 
  background: #aaa; 
} 
 
.modal__close:before { 
  transform: rotate(-45deg); 
} 
 
@media screen and (max-width: 20.32cm) { 
 
} 
 
@media screen and (max-width: 24.2cm) { 
  .modal__inner { 
    width: auto !important; 
    height: 50%; 
    box-sizing: border-box; 
  } 
} 
 
@media screen and (min-width: 3cm) and (max-width: 35.6875cm) { 
  html, 
  body { 
    font-size: 2.4vh; 
  } 
} 
/* 
@media screen and (min-height: 9.128125cm) and (max-height: 25.92916666667cm) { 
  html, 
  body { 
    font-size: 1vw !important; 
  } 
} 
*/ 
@media screen and (min-width: 35.6875cm) and (max-width: 108cm) { 
  html, 
  body { 
    font-size: 2vh; 
  } 
} 
 
@media screen and (min-width: 108cm) { 
  html, 
  body { 
    font-size: 2vh; 
  } 
}

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <meta charset="UTF-8" /> 
    <title>Title</title> 
  </head> 
  <body> 
    <div class="wrapper"> 
      <header id="header " class="header"> 
        <nav class="navbar"> 
          <ul class="navbar__menu"> 
            <li class="navbar__menu-item"> 
              <a class="navbar__menu-item-link" href="#">Home</a> 
            </li> 
            <li class="navbar__menu-item"> 
              <a class="navbar__menu-item-link" href="#">Service</a> 
            </li> 
            <li class="navbar__menu-item"> 
              <a href="" class="navbar__menu-item-link__svg" 
                ><label for="modal-1"> 
                  <svg 
                    version="1.1" 
                    xmlns="http://www.w3.org/2000/svg" 
                    x="0px" 
                    y="0px" 
                    viewBox="0 0 14 14" 
                    fill="#007bff" 
                    height="2em" 
                    width="2em" 
                    style="enable-background:new 0 0 14 14;" 
                    cursor="pointer" 
                    xml:space="preserve" 
                  > 
                    <path 
                      d="M7,9L5.268,7.484l-4.952,4.245C0.496,11.896,0.739,12,1.007,12h11.986 
                        c0.267,0,0.509-0.104,0.688-0.271L8.732,7.484L7,9z" 
                    /> 
                    <path 
                      d="M13.684,2.271C13.504,2.103,13.262,2,12.993,2H1.007C0.74,2,0.498,2.104,0.318,2.273L7,8 
			            L13.684,2.271z" 
                    /> 
                    <polygon points="0,2.878 0,11.186 4.833,7.079" /> 
                    <polygon points="9.167,7.079 14,11.186 14,2.875" /> 
                  </svg> 
                </label> 
              </a> 
            </li> 
          </ul> 
        </nav> 
      </header> 
      <div class="content"> 
        <div class="container"> 
          <div class="text"> 
            <p> 
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam 
              fuga illo ipsum recusandae sapiente vero, voluptatum? Ad cum 
              cupiditate dolor, et excepturi magnam quasi repellat reprehenderit 
              saepe similique soluta temporibus? 
            </p> 
            <p> 
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam 
              fuga illo ipsum recusandae sapiente vero, voluptatum? Ad cum 
              cupiditate dolor, et excepturi magnam quasi repellat reprehenderit 
              saepe similique soluta temporibus? 
            </p> 
            <p> 
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam 
              fuga illo ipsum recusandae sapiente vero, voluptatum? Ad cum 
              cupiditate dolor, et excepturi magnam quasi repellat reprehenderit 
              saepe similique soluta temporibus? 
            </p> 
            <p> 
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam 
              fuga illo ipsum recusandae sapiente vero, voluptatum? Ad cum 
              cupiditate dolor, et excepturi magnam quasi repellat reprehenderit 
              saepe similique soluta temporibus? 
            </p> 
            <p> 
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam 
              fuga illo ipsum recusandae sapiente vero, voluptatum? Ad cum 
              cupiditate dolor, et excepturi magnam quasi repellat reprehenderit 
              saepe similique soluta temporibus? 
            </p> 
          </div> 
        </div> 
        <input class="modal-state" id="modal-1" type="checkbox" /> 
        <div class="modal"> 
          <label class="modal__bg" for="modal-1"></label> 
          <div class="modal__inner"> 
            <label class="modal__close" for="modal-1"></label> 
            <h2>Some Text</h2> 
            <p class="modal__inner-text"> 
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum 
              dolorem ducimus expedita id ipsum iste omnis ut? Beatae, 
              blanditiis dicta, ea eaque fugiat in minima odit officia 
              praesentium, vitae voluptas. 
            </p> 
          </div> 
        </div> 
      </div> 
    </div> 
    <footer class="footer" id="footer"> 
      <p class="footer-text">copyright 2019</p> 
    </footer> 
  </body> 
</html>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как сделать Radial blur с помощью SVG?

Такой вопрос, как сделать Radial blur с помощью SVG? Порыв в гугле я понял что либо он в SVG не так называется, либо способа нет

166

jQuery

ajax ($.post) то работает, то нет (в некоторых браузерах)

Есть код ajax который работает с помощью библиотеки jquery:

135

Добавление изображение по ссылке в DataGridView

Есть таблица DataGridView, в ней колонка с типом данных DataGridViewImageColumnКак добавить туда ссылку на изображение, чтобы показать картинку? По типу как...

130

Как включить сенсорный интерфейс в GeckoFX (C#)?

Всем добрый деньСтолкнулся с проблемой включение "сенсорного" интерфейса на движке geckofx 60

145