Возможно ли иметь всплывающее окно, которое "вырывается" из переполнения: прокрутка или переполнение: автоконтейнер?

У меня есть область с прокруткой, содержащая всплывающие меню. Концептуально, что-то вроде этого:

<div style="overflow:auto; width:100px; height:100px">
  ... content here that big enough to trigger scrollbars...
  <div>
    <a href="javascript:$('#popup').show()">Click here</a>
    <div style="position:relative">
      <div id="popup"
           style="display:none; position:absolute; width:150px; height:150px">
        ... more content. This div gets shown and hidden by jquery on click events.
      </div>
    </div>
  </div>
</div>

Проблема заключается в том, что при всплывающем всплывающем меню она также содержится в прокручиваемом div и не отображается вне прокручиваемой области размером 100x100 пикселей независимо от того, насколько высоко я делаю z-index. Я понимаю, конечно, что в каком-то смысле именно то, что я просил, когда я сказал внешнему div переполняться: auto в первую очередь. Но для моего варианта использования это не то, что я хочу - я хочу, чтобы всплывающее меню было "сверху" и могло выходить за пределы прокручиваемой области, оставаясь в нужном месте, то есть прямо под Ссылка "Нажмите здесь". Даже если ссылка "Нажмите здесь" может перемещаться по мере прокрутки контейнера.

Я также понимаю, что есть некоторые сложные обходные пути, которые я мог бы использовать, например, поместить всплывающее окно полностью за пределы прокручиваемого div и использовать javascript для его положения. И тогда мне нужно будет реагировать на события прокрутки, чтобы переместить их, когда содержимое прокручивается и т.д. Не говоря уже о необходимости писать много кода для повторной реализации того, что "позиция: relative/position: absolute" дала мне бесплатно, что также потребует немало рефакторинга моего собственного кода, поэтому я бы предпочел избежать его.

Мне интересно, есть ли какой-нибудь простой трюк, который я могу применить к моему внутреннему div, чтобы сказать ему игнорировать его свойство "переполнения контейнера", или, в противном случае, удобный jquery script, который будет реализовывать сложные вещи для меня за кулисами, поэтому мне просто нужно позвонить, чтобы получить эффект, который я получаю после.

Ответы

Ответ 1

Я бы сказал, что это невозможно сделать без использования JS для вычисления позиции ссылки, а затем отобразить всплывающее окно с положением: fixed.

Проблема заключается в том, что ваше всплывающее окно находится внутри div с overflow:auto, и все внутри этого div повлияет на прокрутку, поэтому, чтобы показать всплывающее окно, вам нужно взять его за пределы этого div, и единственный способ, которым я знаю сделайте это с помощью позиции: fixed... (или, может быть, с использованием позиции: абсолютной по всплывающему окну, и div обертки с позицией: относительная, которая содержит текст и всплывающие окна)

поэтому я предлагаю 3 решения:

поместите всплывающее окно вне div с прокруткой, и когда пользователь нажимает по ссылке, отобразите всплывающее окно
вычислить точное положение ссылки (x, y) и отобразить всплывающее окно с использованием положения: фиксированное и координаты
используйте приятное и всегда удобное в использовании окно сообщений (например http://csscody.com/demo/wp-content/demo/popup/demo.htm) Я знаю, что это не совсем что вы хотели, но.. у меня кончились идеи = D

Я надеюсь, что это поможет

Ответ 2

Отображение всплывающего окна внутри div с "overflow: auto", "overflow: scroll" или "overflow: hidden" всегда будет генерировать такие проблемы. По правилу дочерний элемент не может отображаться за пределами родительских границ во всех этих случаях, потому что свойство переполнения делает именно это. Использование " position: fixed" во всплывающем окне решит вашу проблему, но если вы прокрутите вниз, вы увидите, как всплывающее окно отображается в старой позиции, предшествующей событию прокрутки. Чтобы решить эту проблему, вы можете использовать JQuery следующим образом:

$(".your-popup-PARENT-class").live( {
    mouseenter: function(event) {
        event.stopPropagation();
        var position = $(this).offset();
        $(this).find(".your-popup-class").css("top", (position.top + 30) );
        $(this).find(".your-popup-class").css("left", position.left);
        $(this).find(".your-popup-class").css("display", "inherit");
    },
    mouseleave: function(event) {
        event.stopPropagation();
        $(this).find(".your-popup-class").css("display", "none");
    }
});

Этот сегмент кода находит ваш родительский элемент всплывающего окна в дереве DOM, сохраняет текущую позицию и отображает всплывающее окно в той же позиции родителя. Как вы можете видеть, вы можете добавлять или удалять нужные пиксели (жирный код в предыдущем определении CSS).

Надеюсь, это будет ужасно для кого-то другого с такой проблемой.

С уважением!

Ответ 3

Я не уверен, какой эффект вы собираетесь использовать, но если вы удалите всплывающий контейнер, то всплывающее окно появится вне прокручиваемого div.

<div style="overflow:auto; width:100px; height:100px">
  ... content here that big enough to trigger scrollbars...
    <div id="popup"
         style="display:none; position:absolute; width:150px; height:150px">
      ... more content. This div gets shown and hidden by jquery on click events.
    </div>
</div>