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;}
  • Обсуждения

    • Всем привет! Хотела бы представить свою работу новичка на обсуждение для получения конструктивной критики и/или советов, взглядов что можно улучшить или изменить, общее впечатление, конечно, тоже интересует.   https://alesia-k.github.io/Tajam-template/ Обратите, пожалуйста, внимание на: - блок "MEET OUR AMAZING TEAM". Немного не нравится как смещаются item при наведении мыши, как будто немного дергаются. Так ли по-вашему это должно работать или такое поведение блока нужно изменить? - инпут "subscribe" в футторе. При клике на инпут, немного смещается и сам инпут, и рядом стоящая кнопка. Было бы классно, если бы подкинули идею как сделать, чтобы такого не было. - и почему-то при клике на <a href="tel:(+62)2122243333">(+62)21-2224 3333</a>   не идет процесса соединения. Заранее спасибо!
    • Попробуйте убрать стиль: html.pum-open.pum-open-overlay, html.pum-open.pum-open-overlay.pum-open-fixed .pum-overlay { /* overflow: hidden; */ } в файле "pum-site-styles.css?generated=1634785690&ver=1.16.2"
    • Прошу прощения!! Акроми
    • По одному лишь скриншоту сказать сложно
    • Доброго времени суток. Возникло 4 проблемы, 2 из них решилось при включении внутренних функций отладки плагина. Уже сломал голову выискивая в 1 случае нужный css. 1. При нажатии оставить заявку или на блок в *Наши услуги* появляется черная рамка в окошке (на скрине видно), причем, появляется она рандомно, иногда с 1 раза иногда с 10... При нажатии в окошко она исчезает. 2. Всего на сайте 4 окна, всё в них одинаковое, настройки и шорт код контактной формы, разница только в логотипе и номере. Проблема: При открытии окна *Оставить заявку* страница мотается вверх и открывается окно, при закрытии отматывается обратно на ту часть, где было нажатие кнопки (Хотя отмотки страницы вообще не должно быть, нажал окно просто открылось). Так же есть кликабельные блоки в разделе *Наши услуги*, при нажатии они так же отматывают страницу вверх, а при закрытии не возвращается вниз. С данной проблемой (скорей всего проблема в совместимости скриптов, но в скриптах я полный 0) столкнулся в первые в данном плагине. Буду признателен любой помощи.
×
×
  • 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