How to add a modal to an existing file?

Question

I have successfully made a modal yesterday, separately, because I did not want to ruin the rest of my code. How do I add it to the existing one now? Here are the coding files. T

Answer 1

Is this what you are looking for?

If so, then it should be relatively easy. First you need to combine the modal HTML with the rest of your code. It'd probably make sense to add it to the end of the main page, after the

. You don't have to add the two

• Home
• Quem somos
• Onde Atuamos
• Servicos
• Depoimentos
• comecando
• Contacte-nos
Acessar

Bem-vindo à MMT UNIVERSITY

Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
deserunt mollit anim id est laborum.

MMT University

Se registre para começar Registrar

Acessar

Acesse a MMT University Esqueceu a senha? Acessar

Bem vindo!

Para continuar aprendendo, acesse a sua conta!

Sign In

MMT University!

Se registre para entrar na melhor universidade trading do mundo.

Registre-se

Run and edit this code online

EDIT: (for the problem mentioned in the comments, which has been deleted by SO)

There are a couple of problems with what you have.

1. You aren't including the stylesheet, style.css (I'm not sure what it is named where you actually have your code, but in repl.it, the stylesheet is named style.css)

Fixing that results in:

...but the modal is stuck at the bottom left:

2. Deciding to name the modal container class modal was a dumb idea on my part, because jQuery seems to already have reserved that name and is overriding it with its own styles. I should've seen that. Anyways, renaming it to modal-container and updating the HTML accordingly fixes this problem, but now the modal spans the entire page:

3. That's because the container class isn't included for some reason on your style.css. I pasted it over, because it is a required class to structure the modal correctly:

4. You might have noticed that the right side of the modal's padding is messed up. This because of the padding rule in the class overlay-panel. Removing this results in:

And all should be good now.

Repl.it link: https://repl.it/@marsnebulasoup/UncommonIntentMolecule-1