Wie mache ich ein div Popup mit einem Bookmarklet?

Question

Wie mache ich ein Bookmarklet, wo ein Div in der Mitte des Bildschirms erscheint?

Scheint sehr einfach, ich kann es einfach nicht bekommen.

Answer 1

Um ein div in der Mitte des Bildschirms erscheinen, müssen Sie zwei divs, eine in der anderen:

• Die äußere div oben 50% Feststellung hat; links: 0px; rechts 0px; Höhe: 1px und Überlauf: sichtbar
• Das Innendiv ist absolut nach links positioniert: 50%, oben: minus der Höhe des div und hat einen Rand-links von minus der Breite des div. Das heißt:

#

<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; 
} 

Vergessen Sie nicht, dass IE6 nicht Position unterstützt: fixiert, so dass Sie wieder in Position fallen könnten wollen: absolute und blättern Sie zu der Spitze die Seite, wenn Sie IE6 erkennen.

Wie für das Bookmarklet: Sie müssen Javascript schreiben, das diese Elemente erstellt und an den unteren Rand der Seite anfügt. Here's a detailed tutorial on adding elements to a page with 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);