Форум

frutality · #1 (**permalink**) 19.06.2013, 13:35

Всем доброго времени суток!

Использую jQuery 1.9.1 и jQuery UI 1.10.1.

Что делаю: обычное модальное окно средствами UI Dialog.

Проблема: при использовании modal:true (что в результате "затемняет" фон и не дает кликать по ссылкам, пока открыто модальное окно) появляется белая полоса. Скриншот прилагаю.

http://javascript.ru/forum/attachmen...d=137163386 1

Никакой CSS-разметки для модального окна не делал. Только стили от разработчиков, скачанные с jqueryui.com.

Firebug не позволяет мне обнаружить, что это за элемент с белым фоном.

Вряд ли это поможет, но вот весь Javascript, используемый на моей странице:

$(function(){
        /* Инициализация модального окна */
        $('#dialog').dialog({
          autoOpen: false,
          draggable:false,
          modal:true,
          resizable:false,
          width:760,
          open: function(){
            $('.ui-widget-overlay').bind('click',function(){
              $('#dialog').dialog('close');
            })
          }
        });
        
        /* Модальное окно */
        $('.open-modal-button').click(function(){
          $('#dialog').dialog('open');
        });
      });

P.S. И не такой важный вопрос, но все же: средствами jQuery UI Dialog возможно ли убирать прокрутку документа при появлении модального окна? Как пример, вот этот скрипт. Если бы не его заброшенность, можно было бы использовать.

Faab · #2 (**permalink**) 19.06.2013, 13:57

Я пользуюсь модальными окнами от css фреймворка Bootstrap. Настроек там мало, но зато прост в использовании. HTML вставил и дал Id.

zebra · #3 (**permalink**) 19.06.2013, 14:10

Попробуйте отключить все стили кроме jquery. Если не поможет, переместите div диалога в начало body

frutality · #4 (**permalink**) 19.06.2013, 14:18

Faab,
Я понимаю, что есть разные решения, но когда используешь jQuery UI, хочется пользоваться всеми его возможностями, а не юзать кучу разных фреймворков (:

zebra,
ни то, ни другое (ни вместе) не помогло. Причем, белая полоса создается строго по центру окна. При скролле страницы, кстати, она всегда остается в центре, фиксированно.

frutality · #5 (**permalink**) 19.06.2013, 14:26

Решение, кажется, найдено.

Оказывается, в стиле JQ UI прописано следующее:

.ui-widget-content {
    background: url("images/ui-bg_flat_0_aaaaaa_40x100.png") repeat-x scroll 50% 50% #FFFFFF;
}

Вот это изображение images/ui-bg_flat_0_aaaaaa_40x100.png оказалось просто белым прямоугольником. Я пока не понимаю, с какой целью оно нужно, но если его убрать, то все становится классно, как и задумывалось.

рони · #6 (**permalink**) 19.06.2013, 14:52

Вариант модального окна с отключением скролинга...

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>dialog demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <style type="text/css">

  body{
    height: 2000px ;
    background-color: #FFCC66;
  }
  #opener{
   position: relative;
   top: 120px;
   background-color: #FF3300;
  }

  </style>
</head>

<body>
  <button id="opener">open the dialog</button>

  <div id="dialog" title="Dialog Title">
   3.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vitae risus vitae lorem iaculis placerat. Aliquam sit amet felis. Etiam congue. Donec risus risus, pretium ac, tincidunt eu, tempor eu, quam. Morbi blandit mollis magna. Suspendisse eu tortor. Donec vitae felis nec ligula blandit rhoncus. Ut a pede ac neque mattis facilisis. Nulla nunc ipsum, sodales vitae, hendrerit non, imperdiet ac, ante. Morbi sit amet mi. Ut magna. Curabitur id est. Nulla velit. Sed consectetuer sodales justo. Aliquam dictum gravida libero. Sed eu turpis. Nunc id lorem. Aenean consequat tempor mi. Phasellus in neque. Nunc fermentum convallis ligula.
  </div><script>
                  $(function () {
                        /* Инициализация модального окна */
                        $('#dialog').dialog({
                            autoOpen: false,
                            draggable: false,
                            modal: true,
                            resizable: false,
                            width: 760,
                            height: 150,
                            open: function () {
                                $('.ui-button').bind('click', function () {
                                    $('#dialog').dialog('close');
                                    $(document).unbind('mousewheel');
                                    $(window).unbind("scroll mousewheel");
                                    $(document.body).css({
                                        overflow: ""
                                    });

                                })
                            }
                        });
                        var left = 0,
                            top = 0;

                        /* Модальное окно */
                        $('#opener').click(function () {
                            $('#dialog').dialog('open');
                            left = $(document).scrollLeft();
                            top = $(document).scrollTop();
                            $(document.body).css({
                                overflow: "hidden"
                            });

                            function stop_scroll(event) {
                                if ($(event.target).closest("#dialog").size()) return;
                                event.preventDefault();
                                $(document).scrollLeft(left);
                                $(document).scrollTop(top);
                            }
                            $(document).bind("mousewheel", stop_scroll);
                            $(window).bind("scroll mousewheel", stop_scroll);
                        });
                    });
  </script>
</body>
</html>

frutality · #7 (**permalink**) 19.06.2013, 15:02

рони,
Благодарю. В таком случае, если контента в модальном окне будет много, то пользователь не сможет его посмотреть. Как-то нужно включать скролл для модального окна.

zebra · #8 (**permalink**) 19.06.2013, 15:07

Может вы скачали какую-то тему не стандартную? Попробуйте другую тему установить.

frutality · #9 (**permalink**) 19.06.2013, 15:10

zebra,
Да в том и дело, вообще никаких тем не качал. Только базовый "пакет" с официального сайта.

рони · #10 (**permalink**) 19.06.2013, 15:23

Сообщение от frutality

если контента в модальном окне будет много, то пользователь не сможет его посмотреть

добавил контента ))) смотрите код выше

Форум

Справочник

Discord чат

Курсы javascript