Diskuze: Zavření modal okna

Jan Štrobl

Člen

Jan Štrobl:1.2.2018 12:44

Zdravím,
v javascriptu jsem teprve začátečník, snažím se teď spíš zaměřovat na php. Nicméně jsem si potřeboval vytvořil modal okno v javascriptu do kterého jsem si dal formulář. Problém nastává v momentě, kdy po odeslání formuláře se to okno zavře, tudíž uživatel nemá možnost ani přečíst si hlášku jestli formulář byl nebo nebyl odeslán. Tomu já potřebuji zabránit. Potřebuji se to okno dalo zavřít pouze na křížek (který mám, a okno se ním dá zavřít).

Mám tento kód:

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

Zkoušel jsem i toto https://teamtreehouse.com/…m-submission avšak bezúspěšně. Ví někdo jaký paramtr tam musím střelit abych docílil mého požadavku? Předem díky za reakce.

Odpovědět

1.2.2018 12:44

Peter Sciranka

Tvůrce

Peter Sciranka:1.2.2018 15:51

Ahoj, neviem či to chápem správne, ale ak to máš v PHP a odošleš formulár tak či sa nepresmeruješ na inú stránku, resp. či nedôjde k opätovnému načítaniu stránky, to by mohol byť problém.

Nahoru Odpovědět

1.2.2018 15:51

Act as if it was Impossible to Fail

Jan Štrobl

Člen

Jan Štrobl:1.2.2018 15:57

Nemám to přesměrované, mám to vše na jedné stránce, ale ano je to formulář v php. Nicméně jsem se dočetl že podobný parametr

event.preventDefault();

zapříčiní že modal zůstane otevřený. Ikdyž, přemýšlím že to opravdu může dělat to PHP. Ale nějaké řešen přeci být musí.

Nahoru Odpovědět

1.2.2018 15:57

Peter Sciranka

Tvůrce

Peter Sciranka:1.2.2018 16:08

No dalo by sa použiť to, že po úspešnom odoslaní formulára sa ti v podstate opäť načíta stránka a to dokážeš odchytiť napr.:

if (isset($_POST['submit'])) {

}

Tento kód umiestniš niekde na začiatok stránky, takže po odoslaní formuláru bude platiť daná podmienka a v nej môžeš zadať kód, ktorý otvorí nový modal, kde bude stáť, že formulár bol odoslaný.

Editováno 1.2.2018 16:10

Nahoru Odpovědět

1.2.2018 16:08

Act as if it was Impossible to Fail

Člen

:1.2.2018 20:06

Odpoveď treba načítať ajaxom do toho modálneho okna. Ak to nevieš, pozri si jQuery, s ním to implementuješ bezbolestne aj keď si začiatočník. Navyše to vyslovene potrebuješ do budúcna, silne ti to zlepší UX. Akékoľvek iné riešenie je škrabanie sa okolo hlavy.

Nahoru Odpovědět

1.2.2018 20:06

Jan Štrobl

Člen

Jan Štrobl:2.2.2018 7:56

Ona se ta stránka načítá, musel bych spíše přidat podmínku aby se ta stránka "otevřela" už s tím otevřeným modal oknem.

Jelikož nedokážu přijít na to, jak udělat aby to okno zůstalo otevřené, tak to udělám tím způsobem že se po úspěšném odeslání formuláře, otevře nový modal právě s tou hláškou (Email byl úspěšně odeslán / Email se nepodařilo odeslat)

Nahoru Odpovědět

2.2.2018 7:56

Petr Čech

Tvůrce

Petr Čech:2.2.2018 9:07

To je špatně. Jediné správné řešení je AJAX, jak říká [me|]53059[/me|] . Je to jedna z těch věcí, které se nevyhneš a prostě ji budeš muset někdy umět.
A proč je to špatně? Protože PHP vůbec nemá vědět o nějakém modal okně.
Třeba tohle vypadá celkem ok: https://stackoverflow.com/…ple-with-php

Nahoru Odpovědět

2.2.2018 9:07

the cake is a lie

Jan Štrobl

Člen

Jan Štrobl:5.2.2018 16:24

Tak ve finále jsem se si poradil za pomocí stylů, javascriptů a funkcí na přepínání display:none a display:block.
Kód vypadá zhruba takto.

Je to rychlošmouláda ale spíš pro inspiraci.
Nicméně mám související dotaz a nechtěl jsem zakládat nový topic. Jak je z kódu poznat tak dotyčnému, který se přihlásil k odběru novinek, přijde potvrzovací email. Zde ale nevím jak toho potvrzení docílit.. zpráva mi formulář nebere tudíž nemůžu použít ani hidden inputy. Věděl by někdo jakým směrem jít ?

Editováno 5.2.2018 16:26

Nahoru Odpovědět

5.2.2018 16:24

Jan Štrobl

Člen

Jan Štrobl:6.2.2018 10:05

V pohodě, udělal jsem to přes GET, vůbec nevím proč jsem se na to ptal.

Nahoru Odpovědět

6.2.2018 10:05

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.