Jak zrobić podstronę wyskakującą w chmurce ?

Question

Witam, tworzę sobie stronę i większość już zrobiłem i chciałbym zająć się logowaniem i rejestracją. Nie mam pojęcia jak zrobić aby po kliknięciu w Log In wyskoczyło okienko równocześnie zostając na aktualnej podstronie i pokazało się np w chmurce pod napisem Log In (postaram się to narysować, sorki że w paincie ;/) oraz mam kolejny problem bo chciałbym aby po najechaniu border-bottom był na równi z belką nawigacji a nie tak jak mam teraz

Oto screeny:

https://zapodaj.net/801c999960fb2.png.html

https://zapodaj.net/edd569670298b.png.html

edit: chciałbym aby to wyglądało mniej więcej jak to
https://zapodaj.net/d07aa6cdcf86b.jpg.html tylko żeby chmurka wychodziła z góry :)
Pozdrawiam i dzięki za odpowiedzi

Answer 1

http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/

 

http://materializecss.com/modals.html#!

http://getbootstrap.com/javascript/#modals

http://t4t5.github.io/sweetalert/

Comments

Cześć, oto właśnie mi chodziło. Próbowałem zrobić tak jak polecił kolega wyżej (Adamsky97) ale nie wychodziło mi to zbytnio wiec wykorzystałem twoje linki które okazały się skuteczne :) już wszystko działa jak powinno pozdrawiam :)

---

Cieszę się, że pomogłem.

Pozdrawiam

Answer 2

Ja bym stworzył diva z position:absolute; (żeby wyświetlał się niezależnie od obecnego układu strony), z-index:100; (żeby wyświetlał się "na wierzchu"), i display:none; celem ukrycia, po czym wypozycjonował go tak, by znajdował się w odpowiednim miejscu. Potem dodałbym jQuery i w kodzie js napisał zdarzenie click

$('.nazwa-klasy-przycisku').click(function() {
   $('.nazwa-klasy-okienka').fadeIn(); //stopniowe pojawianie się diva
});

Zamiast jQuery można użyć CSS...

.log-in:hover .okienko-logowania {
  display:block;
}

...albo ten sam skrypt napisać w czystym Javascripcie.

Pozdrawiam.

 

Comments

Dziękuje za odpowiedź będę próbował :)