Показать сообщение отдельно
  #6 (permalink)  
Старый 19.06.2013, 14:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,071

Вариант модального окна с отключением скролинга...
<!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>

Последний раз редактировалось рони, 19.06.2013 в 15:22.
Ответить с цитированием