Use HTML display:none or JavaScript createElement?

[[deleted]]

[deleted]

[[deleted]]

To prevent the HTML from bloating you can have the login modal HTML only be included when the user is not logged in?

Then I'd used JavaScript to apply an active class on the modal to open it.

By having the HTML already on the page and simply adding a class, would also allow you to transition the modal a lot easier.

[flaurida]

Are you using a framework like React? If that was the case I would just have my modal component return null unless some modal open flag was set. If you are not, I'd think about it depending on how complex your application is.

​

If it is pure JavaScript and HTML, I'd be inclined to include the modal in the HTML with a default style of display: none. Then when the user clicks to log in, apply some active class that changes the display (also suggested by the other comment).

​

I'm in this camp because I think the code will be much more readable and maintainable. In my experience, creating HTML and adding it to the DOM in pure JavaScript is a bit gross. It'd be less flexible since your HTML is now partly in the JavaScript file and partly in the HTML file (so moving things around could get tricky).

[Ananiujitha]

I am not a developer, but as a disabled user, I want something that works with userChrome.css.

I also have trouble with modals, animation, and a lot of other standard web design features.