• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS Popup

P

pimbolie1979

Mitglied
Hallo Leute,

Ich habe ein Popup mit css erstellt. Das Popup funktioniert auch schon mal recht gut. Nur leider kann ich den Hintergrund scrollen dies ist auf Tablets recht unpraktisch. Ich habe bereits auch overflow-y: hidden ausprobiert. Dies würde das Problem auch beseitigen, jedoch wollte ich ohne Javascript auskommen. Ich habe demnach ein Formular mit einem Submit Button. Wenn dieser angeklickt wird, dann erscheint das Popup. Jedoch wie kann ich jetzt das overlflow-y: hidden ohne javascript setzen?

HTML: 
#blackout
{
    width: 100%;
    height: 100%;
    border: none;

    position: fixed;
    top: 0px;
    left: 0px;

    display: block;
    visibility: visible;
   
    background-color: #000000;
    filter: alpha(opacity=85);
    -moz-opacity: .85;
    opacity: .85;

    z-index: 999;
}


#info_box
{
    width: 1000px;
    height: 798;
    border-right: 4px solid #9EBB00;
    border-bottom: 4px solid #9EBB00;
    border-left: 4px solid #9EBB00;

    position: fixed;
    top:50%;
    left: 50%;

    margin-top: -399px;  /* (heigt / 2) */
    margin-left: -504px; /* (width / 2) */

    display: block;
    visibility: visible;

    background-color: #FFFFFF;
    z-index: 1000;
}
 
Werbung:
Bis jetzt habe ich den body mit css so formatiert:

body
{
text-align: center;
background-image:url(../bilder/background.png);
margin: 0px;
padding: 0px;
border: 0px;
}

jedoch wie kann ich overflow-y: hidden hinzufügen wenn ich auf den submit button klicke? und das ohne javascript
 
Werbung:
Da fällt mir nur PHP ein, jedoch musst du dann die Seite neu laden.

Ich hoffe, dass ein anderes Forenmitglied dir da weiter helfen kann. :(
 
Ja wenn ich auf dem Submit Button klicke dann wird die seite neu geladen. Jetzt muss ich nur noch dynamisch die hidden eigenschaft hinzufügen.
 
Werbung:
Ich stehe gerade auf dem Schlauch :-)

Ich kann mir php abfragen ob das popupelemet geöffnet ist, dann würde ich den scrollbalken hidden und wenn dies nicht der Fall ist dann aktiviere ich den Scrollbalken wieder.
 
Den Body formatierst du im CSS Dokument mit

body
{
# Deine Anweisungen
}

Ja, du kannst es mit PHP abfragen. Und dementsprechend den Scrollbalken verstecken oder zeigen.
Das sollte sogar mit einem "Affenformular" (vermute ich) gehen
 
Ja aber wie kann ich dann die bodyformatierung ändern?

Mein Body sieht momentan so aus. Dieses habe ich in einer externen layout.css Datei gespeichert. Diese Datei wir auch jedes mal eingebunden.

Nun muss ich diese Information um das overflow-y: hidden erweitern. Jedoch weiß ich nicht wie ich eine neue Anweisung hinzuu erstellen soll.
 
Werbung:
ich kann natürlich die Layout Datei mit php gegen eine andere Layout Datei austauschen das finde ich persönlich aber als eine nicht elegante Lösung
 
Du könntet ein Dynamic Style Sheet machen, deine Datei sieht aktuell so aus: name.css mache daraus: name.css.php

Dann kannst du PHP und CSS gleichzeitig nutzen
 
Nein. hör auf mit deinen DSS verdirb uns hier nicht die leute...

Javascript ist hier das Mittel der Wahl

/e was mir sonst noch einfällt ist das du via php eine Klasse setzt und diese dann via CSS stylest, das wäre ok... Also beim submit.
 
Werbung:
Wenn jemand von mir ein Auto will, aber keine runden Räder, mach ich ihm auch keine 8-eckigen dran und sage:" das geht schon, aber ist nicht so performant", sondern sage das Autos runde Räder haben.

Code: 
class="<?= $popup ?>"

dann steht dann was drin wie no-popup oder popup...

diese beiden klassen stylest du dann im CSS
 
Werbung:
Diese Lösung scheint nicht zu funktionieren es wird keine Seite mehr angezeigt oder ich habe einen Fehler gemacht


<body <?php if($popup != 0){style="overflow-y: hidden;"}else{style="overflow-y: auto;"} ?> >
 
Ich mache es immer so:
<?php
// Was soll getan werden
$Ergebnis;
?>
// Normaler CSS bereich

body
{
overflow: <?=$Ergebnis>;
}
 
Werbung:
Also... an dem Ort, an dem die Submit auswertung gemacht wird und anschliessend ein Popup geöffnet werden soll machst du
Code: 
$popup = 'popup';
ansonsten stellst du ihn standardmässig auf no-popup oder was auch immer.

Die Klasse setzt du wie oben geschrieben:

Code: 
<body class="<?= $popup ?>">
...
</body>

im CSS hast du

Code: 
.popup {
   overflow-y: hidden;
}
.no-popup {
   overflow-y: auto;
}

Aber wie schon oben geschrieben, Javascript wäre hier das Mittel der Wahl. Denn bedenke, beim Schliessen, musst du wieder einen Seitenreload auslösen.

Supercomputer schrieb:
Ich mache es immer so:
<?php
// Was soll getan werden
$Ergebnis;
?>
// Normaler CSS bereich

body
{
overflow: <?=$Ergebnis>;
}
Zum Vergrößern anklicken....
1. Keine Trennung von Logik und Design.
2. Caching schlecht.
3. Für Variablen in CSS wurde nicht umsonst SASS/LESS entwickelt
 
Schon erstaunlich, was manche Leute für Verrenkungen machen, um bloß nicht mit JavaScript in Berührung kommen zu müssen.
Es gibt da eine ganz einfache Gleichung: Kein JavaScript == keine clientseitige Funktionalität

Die Antwort auf die Frage lautet Modal. So etwas wird u.a. von Bootstrap und jQuery UI mitgeliefert, und man kann es natürlich auch selber schreiben. Alles andere - incl. der Vorschläge in diesem Thread - wäre keine vernünftige Lösung. Ein kompletter Reload zum Schließen eines Popups ist jedenfalls völlig sinnfrei.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben