Ako zdvojiť modal?

Programovacie jazyky, rady, poradňa...
alvar
Amateur
Amateur
Príspevky: 34
Registrovaný: 25 sep 2014, 20:02

Ako zdvojiť modal?

Príspevok od používateľa alvar »

Čaute, vedeli by ste mi poradiť, ako to urobiť tak, aby jedno tlačidlo otvorilo registráciu a druhé by otvorilo prihlásenie? Tu je to, čo mám teraz, ale obidve tlačidlá otvoria iba registráciu. Vďaka za pomoc!

Kód: Vybrať všetko

<div class="logo2">
            <button id="myBtn"><i class="fa fa-sign-in"> </i> &nbsp; PRIHLÁSENIE</button>
          </div>

          <div class="logo3">
            <button id="myBtn2"><!--<i class="fa fa-unlock-alt"> </i> &nbsp;--> REGISTRÁCIA</button>
          </div>

<!-- Trigger/Open The Modal 1 -->

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">x</span>

        toto by malo byť prihlásenie..........

  </div>

</div>


<!-- Trigger/Open The Modal 2 -->

<!-- The Modal -->
<div id="myModal2" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">x</span>

       toto by mala byť registrácia...............

  </div>

</div>




 <script>

 // 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 on 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";
    }
}

</script>


 <script>

 // Get the modal
var modal = document.getElementById('myModal2');

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

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

// When the user clicks on 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";
    }
}

</script>
aacid
Hardcore addict
Hardcore addict
Príspevky: 8135
Registrovaný: 22 nov 2006, 21:55
Bydlisko: BA

Re: Ako zdvojiť modal?

Príspevok od používateľa aacid »

nejak nemam cas to teraz testovat, ale ako na to pozeram, nebude problem to ze oba divy ukladas do jednej premennej?
najprv do premennej modal ulozis prvy div, potom ale do tej istej premennej ulozit druhy div (registracia). skus si to rozdelit do dvoch roznych premennych. alebo este lepsie na zaklade event.target rozlisuj na co klikas a podla toho zobraz co potrebujes, toto je velke nie ze tam mas 2x identicky kod, jediny rozdiel su idcka.

potom doporucujem naucit sa debugovat javascript, taketo problemy vies potom velmi jednoducho vyriesit, lebo hned vidis co sa v ktorej premennej nachadza a co sa vlastne vykonava pri samotnom behu:
https://developers.google.com/web/tools ... /step-code
https://developers.google.com/web/tools ... reakpoints
alvar
Amateur
Amateur
Príspevky: 34
Registrovaný: 25 sep 2014, 20:02

Re: Ako zdvojiť modal?

Príspevok od používateľa alvar »

Vďaka, už mi to funguje, ale nie úplne. Zmenil som premennú modul na premenné: prihlasenie, registracia.. Teraz mám však problém pri s modalom prihlásenia, konkrétne s jeho zatvorením kliknutím mimo neho.. Tieto funkcie tam mám teraz..

Kód: Vybrať všetko

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

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
   if (event.target == registracia {
        registracia.style.display = "none";             
    }
}
Prečo registráciu zavrieť ide a prihlásenie nie?
aacid
Hardcore addict
Hardcore addict
Príspevky: 8135
Registrovaný: 22 nov 2006, 21:55
Bydlisko: BA

Re: Ako zdvojiť modal?

Príspevok od používateľa aacid »

rovnaky problem.
pridas do window.onclick funkciu, ktora zavrie prihlasenie. nasledne tu funkciu prepises funkciou ktora zatvara registraciu. tym padom tam ta povodna (prihlasenie) uz neexistuje.
alvar
Amateur
Amateur
Príspevky: 34
Registrovaný: 25 sep 2014, 20:02

Re: Ako zdvojiť modal?

Príspevok od používateľa alvar »

Je to tam!! diky moc! :)
Napísať odpoveď