Neues Fenster auf Website

[Dr.Dr.SheldonLeeCooper]

Hallo,

und zwar suche ich eine Möglichkeit das ich wenn man sich bei meinem Server Registriert eine Art Popup Fenster erscheint wenn man auf Register klickt. Danach gibt man die Daten etc ein und man kann es schließen.
Sprich es soll nicht eine neue Seite sein sondern direkt auf der Website ein kleines Fenster öffnen.

Wie bekomme ich sowas hin ?

[tolio]

jquery

[3lue]

Einfach einen div-container mit display:none; verstecken und position:absolute; positionieren und dann mit jQuery fadeIn anzeigen lassen

[BAMgaming]

Lightbox wird dazu immer gern verwendet (), aber es reicht ja ein einfacher modaler Dialog..

[NoVision]

Brauchst dafür Jquery (Jquery-ui) und diesen Teilcode:

 Spoiler

CSS:

PHP Code:

.overlay-register-bg
{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
    cursor: pointer;
    background: #000000;
    background: rgba(0,0,0,0.75);
}

.overlay-register-content
{
    background: #FFFFFF;
    padding: 1%;
    width: 40%;
    font-family: Ubuntu-Light;
    color: #333333;
    position: relative;
    top: 15%;
    left: 50%;
    margin: 0 0 0 -20%;
    text-align: center;
    cursor: default;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0,0,0,0.9);
}

.close-btn
{
    background: #AAAAAA;
    color: #FFFFFF;
    font-family: Ubuntu-Regular;
    font-weight: 800;
    cursor: pointer;
    padding: 5px 20px;
    border: none;
    border-radius: 100px;
    margin: 5px;
}

.close-btn:hover
{
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
} 


HTML:

PHP Code:

<div class="overlay-register-bg">
    <div class="overlay-register-content">
                <!-- Hier einfach die Form etc. -->
        <br>
        <button class="close-btn">CLOSE</button>
    </div>
</div> 


JS/JQ:

PHP Code:

$(document).ready(function()
{
    $('.show-register').click(function(event)
    {
    event.preventDefault();
    $('.overlay-register-bg').slideDown();
    });
    
        $('.close-btn').click(function(){
    $('.overlay-register-bg').slideUp();
    });

        $('.overlay-register-bg').click(function(){
    $('.overlay-register-bg').slideUp();
    })
    
    $('.overlay-register-content').click(function(){
    return false;
});