Диалоговое окно jQuery Pop Out - проблема с позиционированием при прокрутке страницы - PullRequest
Новая
       13

Диалоговое окно jQuery Pop Out - проблема с позиционированием при прокрутке страницы

0 голосов
/ 07 октября 2011

После хорошего начала здесь: Новый календарь Google, "всплывающие" события, если они не помещаются в определенную область , теперь у меня есть некоторые дополнительные вопросы и проблемы, которые нужно выработать.

Вот код jQuery: 

// Google-Calendar-Style pop-outs
        $(function() {
            $(".inner").each(function() {
                var inner = $(this);
                var popout = inner.clone().removeClass("inner");
                popout.dialog({
                    autoOpen: false,
                    draggable: false,
                    resizable: false,
                    width: 150
                });
                var plusMore = $("<div><a href='#' onmouseover='this.style.cursor=\'pointer\''>See More...</a></div>");
                plusMore.insertBefore(inner.find("> div:eq(1)"));
                plusMore.click(function() {
                    var pos = inner.offset();
                    popout.dialog("option", {
                        position: [pos.left - 6, pos.top - 4]
                    }).dialog("open");
                });
            });
        });

Вот CSS, связанный с этим: 

<style type="text/css">
        .outer {
            height: 45px;
            overflow: hidden;
        }
        .inner > h1 {
            margin: 0;
            font-size: 1em;
        }
        .ui-widget.ui-dialog {
            font-size: 1em;
            font-family: inherit;
            padding: 2px 5px;
        }
        .ui-dialog div.ui-dialog-titlebar {
            padding: 0;
            background: transparent none;
            border-width: 0;
        }
        .ui-dialog div.ui-dialog-content {
            padding: 0;
        }
    </style>

Вот HTML (обратите внимание, я на самом деле использую Smarty дляЗацикливание некоторых массивов здесь, но это основа ... самый внутренний <div> повторяется с каждым циклом (пользователем) (таким образом, есть один outer и один inner на ячейку): 

<div class="outer"> 
  <div class="inner">
   <div>
       <a href=Tenant.php" style="text-decoration:none">{$tenant.firstName} {$tenant.lastName}</a><br>
       &nbsp;&nbsp;&nbsp;<a href="Message.php">Send Message</a><br>
    </div>
  </div>
</div>

Вот скриншот с двумя проблемами, которые я хотел бы исправить.

  1. Когда я прокручиваю страницу вниз (хотя бы один маленький кусочек), а затем нажимаю «увидеть больше»... "- всплывающее окно не в правильном месте. Как видно на рисунке ниже, оно должно было быть над самой первой строкой / блоком - но вместо этого оно упало намного ниже. Не дайте себя одурачить и подумайтев конечном итоге выровнялся по блоку № 4 - это просто совпадение, потому что даже последняя запись в таблице будет иметь поле на столько же меньше на экране - и НЕ выровнены. There is NO issue if my scroll bar is at the very top of the page.

  2. Я хотел бы избавиться от места для верхнего заголовка. Я просто хочу, чтобы список пользователей и ссылки начинались сверху.- в том же ряду, что и у всплывающего окна «X».

Here is the issue I'm seeing

1 Ответ

1 голос
/ 08 октября 2011

jQueryUI позиционирует диалоги относительно области просмотра вместо документа, поэтому вам нужно учитывать прокрутку в своих вычислениях. Используйте $(document).scrollTop(): 

popout.dialog("option", {
    position: [
        pos.left - 6 - $(document).scrollLeft(),
        pos.top - 4 - $(document).scrollTop()
    ]
});
...