How to use same overlay div on multiple pages

Question

I have a navigation bar that has login and register links. I made an overlay with a login/register form that shows up over the viewport when clicking either of those two links. My site has multiple pages, since all of them have same navigation bar, are there any ways besides placing same html code of the overlay div with the form on every page from which it can be logged or registered? Can i place overlay div in the navbar?

Answer 1

the overlay code can be placed in a separate html file then dynamically loaded in each page using js / jquery.

something like that: $('#overlay-container').load('path/to/the/overlay_code.html');

Be careful though, $().load() is asychronous, wihc means, the content will be loaded after the main html file. If the user clicks the login button before code is loaded it can cause an issue.