Как сделать div всплывающим с помощью букмарклета?

Question

Как сделать букмарклет, где в середине экрана появляется div,

Кажется, очень просто, я просто не могу понять.

Answer 1

Для отображения div в центре экрана вам нужно два div, один внутри другого:

• Внешний блок имеет фиксированное положение сверху 50%; слева: 0px; прямо 0px; высота: 1px и переполнение: видимый
• Внутренний элемент div расположен абсолютно слева: 50%, верхняя часть: минус высота элемента div и поле слева от минус ширина элемента div. То есть:

#

<div id="outerDiv">
   <div id="innerDiv">
      Your content
   </div>
</div>

#outerDiv
{
    position: fixed;
    top: 50%;
    height: 1px;
    left: 0px;
    right: 0px;
    overflow: visible;
}

#innerDiv
{
    position: absolute;
    width: 200px;
    height: 100px;
    left: 50%;
    margin-left: -100px;
    top: -50px;
}

Не забывайте, что IE6 не поддерживает позицию: исправлено, поэтому вы можете захотеть вернуться к позиции: абсолютной и прокручивать страницу вверх, если обнаружите IE6.

Что касается букмарклета: вам нужно написать javascript, который создает эти элементы, и добавить его внизу страницы. Вот подробное руководство по добавлению элементов на страницу с помощью javascript .

Answer 2

javascript:var theDiv = document.createElement( 'div' ) ; theDiv.appendChild( document.createTextNode('hello') ) ; theDiv.style.position="absolute";theDiv.style.left='50%';theDiv.style.top='50%';theDiv.style.border='solid 2px black'; document.body.appendChild( theDiv ) ; void(0);