Wie erstellen Sie eine JavaScript-floating div Anmeldeformular

Ich Baue eine Website, die ein "Login/Registrieren" - link auf jeder Seite. Wenn jemand auf diesen link klickt, möchte ich ein JavaScript/div-basierten Anmeldeformular zu schweben auf der Oberseite der Inhalte mit einem link zu 'schließen', wenn Sie wollen.

Ich auch wollen, dass die Fähigkeit des div-zeigt sich in der Nähe der position Ihres Maus, ich.e, so, wenn Sie klicken Sie auf den link in der Nähe der Mitte der Seite, es sollte zeigen, bis in der Nähe der Mitte, und Sie don ' T haben, Blättern Sie den ganzen Weg an die Spitze, um es zu sehen. (Zu klären, vielleicht soll es automatisch zu bestimmen die Koordinaten der Maus oder eine Möglichkeit zum angeben der (x, y) - Koordinaten.)

Ich bin ein guter JavaScript-Entwickler selbst, aber kein Experte, so ich bin sicher, es wird einige Bibliotheken tun dies besser können als ich. Irgendwelche links/tutorials zu teilen?

InformationsquelleAutor | 2008-12-06

  1. 2

    Werfen Sie einen Blick auf jQuery Thickbox.

    http://jquery.com/demo/thickbox/

    +1, einfach mit der Thickbox. Nicht sicher, warum es downvoted.
    Vielleicht, weil thinkbox ist zum anzeigen von Bildern
    Thickbox ist für alle modale Inhalte Antonio.
    -1 Link nur link ist tot.
    Vielleicht bewegt es hier: codylindley.com/thickbox

    InformationsquelleAutor FlySwat

  2. 2

    Heute gibt es einen viel besseren Ansatz. Es nennt sich jQuery dialog: http://jqueryui.com/demos/dialog/

    Werfen Sie einen Blick auf das Modell, Form, Beispiel: http://jqueryui.com/demos/dialog/#modal-form

    InformationsquelleAutor Leniel Maccaferri

  3. 1

    Könnten Sie versuchen, diese:

    <div id="loginBox"><!-- insert content here--></div><br />
<style type="text/css"><br />
   #loginBox { <br/>
        display:none; <br/>
        position:absolute; <br/>
        /* left and top */<br/>
   }<br/>
</style><br/>
<script type="text/javascript"><br/>
   function showLoginBox() { document.getElementById('loginBox').style.display = 'block'; }<br/>
</script><br/>
<a href="#" onclick="showLoginBox()" >Show login box</a><br />

    Dass sollte funktionieren, wenn Sie brauchen nur eine einfache Lösung.

    Nur bewusst sein, dass dies nicht Schwimmer über jede select-Listen im IE 5, IE 5.5 und IE6
    oh, und ich denke, Sie wollen, um es zu blockieren, nicht keine
    guter Punkt!

    InformationsquelleAutor Lucas Jones

  4. 0

    Ich habe versucht, Thickbox, aber es zeigte immer ein leeres Feld anstatt den Inhalt des div-ich wollte die Anzeige. Also ich fand Ibox und es funktionierte gut 🙂

    InformationsquelleAutor

  5. -2

    Können Sie eventuell auch Anzeige der login-Seite in einem neuen Fenster mit der Symbolleiste, Adressleiste, etc versteckt. Sie können das Fenster Speicherort mit der Maus-Koordinaten werden aus der Maus, klicken Sie auf Ereignis in Ihrem Haupt-Seite

    InformationsquelleAutor Sanket

Schreibe einen Kommentar