Jump to content

Адаптивное модальное окно

npofopr

By npofopr,
in Freelance

 Share

Recommended Posts

npofopr Trainee

npofopr

Posted
Posted

Доброго времени суток.

Есть у меня вот такое простое модальное окошко

http://blog.avtex.com/2012/01/26/cross-browser-css-only-modal-box/

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

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

Реализации на чисто css я тоже видел, но надо чтобы в IE8, ну и IE7 от части, работало.

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

Link to comment
Share on other sites
  • 2 weeks later...
npofopr Trainee

npofopr

Posted
  • Author
Posted

в мобильных всегда между кликом 300ms задержка это он ждет второго клика. Может вас эта задержка смущает?  

Да там гораздо больше) 

Порой вообще не открывает. С 5 клика только. 

Link to comment
Share on other sites
npofopr Trainee

npofopr

Posted
  • Author
Posted

а если попробовать с помощью

@media screen and (min-width: ...)

не?

и ставить overflow: auto, или y-scroll

Уже к сожалению, негде проверить. Но вроде как пробовал. В общем то это первые вещи, из испробованного. 

 

В целом идеально бы подошли http://drublic.github.io/css-modal/, но старые браузеры вяжут руки, а с js вообще никак у меня(  

Link to comment
Share on other sites

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
Reply to this topic...

×   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
Go to topic listing

  • Similar Content

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

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


    • magnuz
      Как сделать адаптивный многооконный интерфейс?
      By magnuz
      Есть сайт на бутстрапе. Нужно реализовать такой интерфейс с модальными окнами чтобы окон могло быть сколько угодно чтобы при закрытии текущего окна можно было вернуться к предыдущему и обновить его содержимое через ajax. Хватит ли на такое стандартного бутстрапа или надорасширение искать? Можно ли сделать jquery ui окна адаптивными?
    • karakymg
      передать значение href в src фрейма по нажатию на одну из ссылок
      By karakymg
      Доброго времени суток, помогите сообразить конструкцию.
      Есть ссылки, например:
       
      <a href="one.html" target="modal">link 1</a> <a href="two.html" target="modal">link 2</a> <a href="three.html" target="modal">link 3</a> И сам фрейм:
      <iframe name="modal" src="0" id="modalfrm"></iframe> Как по нажатию на ссылку открыть во фрейме ее href="" (при этом оставаться на этой же странице) я сообразил.
      Не могу сделать модальное окно с фрейма используя только css
      Есть варианты? Хотелось бы увидеть ваш подход к этому делу.
      Нашел один из способов сделать модальное окно "CSS Only"
      Ссылка открывающая модальное окно:
       
      <a rel="nofollow" title="позвонить" href="#target-content" class="icon icon-phone"></a> Само модальное окно:
       
            <div id="target-content">         <a href="#" class="close"></a>         <div id="target-inner">           <h2>Тыры пыры трале вале, я модальное окно</h2>         </div>       </div> И его CSS код:
       
      #target-content {   position: fixed;   top: 0;   right: 0;   bottom: 0;   left: 0;   pointer-events: none;   opacity: 0;   transition: 0.5s;   z-index: 999; } #target-content:target {   pointer-events: all;   opacity: 1; } #target-content #target-inner {   position: absolute;   display: block;   padding: 12px;   line-height: 1.8;   width: 70%;   top: 50%;   left: 50%;   -webkit-transform: translateX(-50%) translateY(-50%);           transform: translateX(-50%) translateY(-50%);   box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);   background: white;   color: #34495E; } #target-content a.close {   content: "";   position: absolute;   top: 0;   right: 0;   bottom: 0;   left: 0;   background-color: black;   opacity: 0.8;   -webkit-transition: opacity 200ms;   transition: opacity 200ms; } #target-content a.close:hover {   opacity: 0.4; } Но вот незадача, атрибут target="" уже занят открытием модального окна, как же мне тогда во фрейм загрузить страницу указанную в атрибуте href="" ?
    • brabus
      Как при нажатии на кнопку запустить функции и открыть модальное окно.
      By brabus
      Всем привет!
      Думаю, вопрос простой, но не для меня, второй день копаюсь..
      Есть модальное окно (div), оно запускается, всё хорошо. в нём есть кнопка:
      <button type="submit" class="btn-3" onclick="sendzakaz();"><span>Заказать</span></button> <script> function sendzakaz() { $.ajax ( { type: 'POST', url: './mail.php', data: 'name='+document.getElementById('clientname').value+'&phone='+document.getElementById('clientphone').value, cache: false, timeout: 2000, } ); } </script> Это всё отрабатывает, но мне нужно, чтобы по нажатии на "Заказать" после исполнения sendzakaz() открывалось ещё одно модальное окно:
      <div id="msg" class="modal-win modal-msg"> <a href="" onclick="exit_modal(); return false;" class="close"></a> <div class="inner"> <img src="img/accept-img.png" tppabs="http://xxx.ru/img/accept-img.png" alt=""> <h2><span>ЗАЯВКА ПРИНЯТА</span></h2> <p>Мы скоро Вам перезвоним <br><small>Пожалуйста, включите <br>Ваш мобильный телефон.</small></p> </div> </div> Помогите, пожалуйста!
       
       
    • ellato44
      Открытие модального окна bootstrap при попытке уйти с страницы сайта
      By ellato44
      Доброго времени суток!
      Помогите решить задачку следующего характера:
      имеется код открытия модального окна - http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h
      пример так же ниже указан:
      <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Modal Example</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html> необходимо, чтобы при попытке пользователем закрыть вкладку страницы, т.е. при нахождении курсора скажем в 5px от кнопки закрытия вкладки запускалось модальное окно с контентом., при этом, чтобы не каждый раз оно запускалось, а один раз для каждого нового пользователя (тут дело с куки связано)
      пример встречал, но не получается мне новичку привязать к скрипту нужное мне модальное окно ))
      вот собственно пример:
      пример скрипта открытия модального окна при попытке уйти со страницы сайта взят отсюда - http://dimox.name/popup-window-on-first-web-site-visit
      (function($) { $(function() { // Проверим, есть ли запись в куках о посещении посетителя // Если запись есть - ничего не делаем if (!$.cookie('was')) { // Покажем всплывающее окно $('#boxUserFirstInfo').arcticmodal({ closeOnOverlayClick: false, closeOnEsc: true }); } // Запомним в куках, что посетитель к нам уже заходил $.cookie('was', true, { expires: 365, path: '/' }); }) })(jQuery) не получается приспособить данный скрипт для открытия такого модального окна.. помогите неучу? )) буду благодарен за помощь!
×
×
  • 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

  I accept