Jump to content
  • 0

Положение модального окна


RestWEB
 Share

Question

Приветствую! Есть модальное окошко с затемнением. Написано на html+css.

<a href="#x" class="overlay" id="win3"></a><div class="popup3">Окошко</div>
.popup3 {        width: 500px;       height: 735px;       margin: auto;       background: #ffffff;       display: block;       left: 0;        right: 0;       position: fixed;       top: 0;       visibility: hidden;       z-index: 10;}.overlay:target+.popup3 {       top: 1%;       opacity: 1;       visibility: visible;}.overlay {       background-color: rgba(0, 0, 0, 0.7);       bottom: 0;       cursor: default;       left: 0;       opacity: 0;       position: fixed;       right: 0;       top: 0;       visibility: hidden;       z-index: 1;       -webkit-transition: opacity .5s;       -moz-transition: opacity .5s;       -ms-transition: opacity .5s;       -o-transition: opacity .5s;       transition: opacity .5s;}.overlay:target {       visibility: visible;       opacity: 1;}

При прокрутке окно стоит на месте, а сам сайт прокручивается.

 

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

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Adrian_v1
      Всем привет. Новичок, месяц назад понятия не имел о чем речь. За месяц cверстал сайт, с помощью видео уроков и форумов. 

      Есть две проблемы. 
      1. Хочу добавить всплывающие окошко. На CSS и HTML, без JS. (Скрин №1). Не хватает смекалки, как его сделать по вызову кнопки. Кнопка "#24/7/365". 
      2. Какие свойства посоветуете задать для видео фона, что бы он был во все окно браузера. Если заходить с сафари, проблем нет. Но если с хрома, справа торчит полоска. (Скрин №2)
      Критику воспринимаю адекватно, любые советы приветствуются. Отблагодарю советами по тренировкам по плаванию, так как являюсь тренером.
       
      Сайт - http://demolishingswim.club
       


    • By Daniel
      Возникла такая проблема. Необходимо ввести данные, а затем вывести эти данные в модальном окне, выскакивающее на этой же странице, никакой обработки. Можно ли как то использовать имя или id форм, чтобы потом их вывести в окне? Желательно без использования php и js, т.к. я их ещё не знаю. К примеру: ввёл я логин и пароль и в модальном окне мне высветилось: "Ваш логин: хххх, ваш пароль: хххх" Использую boostrap для модального окна.
    • By Vic-Tor
      Добрый день всем, кто помогает таким балбесам, как я!
      С внешним видом всплывающего окна кое-как разобрался, хотя не уверен, ткните, если что не так, а вот с периодичностью показа не разобрался, во всяком случае, не работает.
      Исходники брал тут, а макет пока тут.
      Прошу не пинать, а помочь, т.к. в скриптах я не разбираюсь вообще, да и в хтмл не асс.
      Спасибо!
    • By Stolarate
      Доброго времени суток. Появилась проблема с модальным окном, в инете не нашел ответа - прошу помощи, если нужно заплатить я заплачу (в рамках разумного)
      На сайте проблема: при открытии модального окна страница скролиться в самое начали и при нажатии кнопок в модальном окне тоже происходит скрол в начало страницы.
      Хочу избавиться от этой проблемы.
      Для анализа кода сбрасываю сайт: trening.1site.pp.ua
      Это не спам - тест страница с проблемой.
      Спасибо прочитанный пост.
      С ув Евгений.
    • By marianna9201
      Добрый день!
      Помогите, пожалуйста, разобраться с маленькой проблемой.
      На сайте есть модальное окно , которое увеличивает изображения: http://bloky.ru/catalog/333
      В данном варианте это маленькие картинки ДСП, ПВХ и т.д.
      При нажатии на картинку происходит её увеличение, но при этом миниатюра картинки исчезает со страницы сайта, т.е. остается открытой только одна увеличенная картинка. Как же сделать, чтобы отображались одновременно 2 картинки: и миниатюра, и оригинальное изображение?
      Спасибо!
       
      Вот CSS - код модального окна:
      zoom-images { cursor: zoom-in;}.zoom-images:focus { position: fixed; z-index: 10; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: auto; height: auto; max-width: 99%; max-height: 99%; pointer-events: none; box-shadow: 0 0 20px #000, 0 0 0 1000px rgba(210,210,210,.4);}.zoom-images:focus { pointer-events: none;}
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy