Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript

How To Add A Modal To An Existing File?

Post a Comment
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. Than

Solution 1:

Is this what you are looking for?

demo

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 <section>. You don't have to add the two <script> tags, and <link> tag though, unless they are different from what is in the main page already.

To make the modal nice looking, you need to place it in a container, which fills the entire page, and has a sort of faded background, like this:

example1

Notice how the background of the modal is greyed out somewhat. This highlights the modal nicely.

To do this, we wrap the div myModal in another div, which I'm going to call modalContainer. We'll apply some styles to it to get that desired background, so we also need to add a CSS class (I'm going to give this class the very clever name of modal). So you have this sort of structure:

<body>
    ... everything before the modal on the main page ...
    <divid="modalContainer"class="modal"><divid="myModal"class="container">
            ... modal stuff goes here
        </div></div>
    ... scripts and whatnot after the modal ...
</body>

And the CSS for this:

.modal {
  position: fixed;    /* position it so that fills the screen, but doesn't move with the page (when you scroll, it doesn't move, but the page moves in the background) */top: 0;             /* position this element at the top...                  */left: 0;            /* ...left corner of the page...                        */width: 100%;        /* ...and set both the width                            */height: 100%;       /* ...and height to 100%, so that the element fills the entire screen */z-index: 99999;     /* set the z-index to a high enough number so that this element is positioned on top of all other elements */background: rgb(0, 0, 0, 0.7); /* set the background to black with some transparency, so you can see through it *//* The following simply centers the modal within this container */display: flex;
  justify-content: center;
  align-items: center;
}

So, modalContainer spans the complete height and width of the screen and is the background for the modal, while myModal houses the actual modal.

Now, to function properly, this requires some changes to modal.js, namely in opening the modal container, instead of just the modal:

//Get the modalvar modal = document.getElementById("myModal");

var modal_container  = document.getElementById("modalContainer")
modal_container.style.display = "none";


window.onclick = function (event) {
  console.log(event.target)
  if(event.target.id == "myBtn") { // If the button is clicked, open the modal container
    modal_container.style.display = "flex"
  }
  elseif (modal !== event.target && !modal.contains(event.target)) { // If the click is outside the modal, hide the modal container
    modal_container.style.display = "none";
  }
}

Now it should work as desired.

Full HTML code:

<body><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script><linkhref="style.css" /><nav><inputtype="checkbox"id="check"><labelfor="check"><iclass="fas fa-bars"id="btn"></i><iclass="fas fa-times"id="cancel"></i></label><imgsrc="logo-solo.png"><ul><li><ahref="#home"> Home</a></li><li><ahref="#quem-somos">Quem somos</a></li><li><ahref="#onde-atuamos">Onde  Atuamos</a></li><li><ahref="#servicos">Servicos</a></li><li><ahref="#Depoimentos">Depoimentos</a></li><li><ahref="#Comecando">comecando</a></li><li><ahref="#sac">Contacte-nos</a></li><ahref="https://www.instagram.com/mmtuniversity_oficial/"class="fa fa-instagram"target="_blank"></a><ahref="https://www.youtube.com/channel/UCuf2KhhA8Ub3hcSgfaziiDw"class="fa fa-youtube"target="_blank"></a><aclass="cta"href="#ex1"key="login"id="myBtn">Acessar</a></ul></nav><scripttype="text/javascript">document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function(e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
          behavior: 'smooth'
        });
      });
    });
  </script><sectionclass="container3"id="home"><h1><strong>Bem-vindo à MMT UNIVERSITY</strong></h1><h2> Lorem ipsum dolor sit amet, consectetur adipisicing elit,<br> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi <br> ut aliquip ex ea commodo consequat.<br>      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore <br> deserunt mollit anim id est laborum.</h2></section><divclass="modal"id="modalContainer"><divclass="container"id="myModal"><divclass="form-container sign-up-container"><formaction="#"><h1>MMT University</h1><span>Se registre para começar</span><inputtype="text"placeholder="Usuário" /><inputtype="email"placeholder="Email" /><inputtype="password"placeholder="Senha" /><inputtype="password"placeholder="Repita a sua senha" /><button>Registrar</button></form></div><divclass="form-container sign-in-container"><formaction="#"><h1>Acessar</h1><span>Acesse a MMT University</span><inputtype="email"placeholder="Email" /><inputtype="password"placeholder="Senha" /><ahref="#">Esqueceu a senha?</a><button>Acessar</button></form></div><divclass="overlay-container"><divclass="overlay"><divclass="overlay-panel overlay-left"><h1>Bem vindo!</h1><p>Para continuar aprendendo, acesse a sua conta!</p><buttonclass="ghost"id="signIn">Sign In</button></div><divclass="overlay-panel overlay-right"><h1>MMT University!</h1><p>Se registre para entrar na melhor universidade trading do mundo.</p><buttonclass="ghost"id="signUp">Registre-se</button></div></div></div></div></div><scriptsrc="main.js"></script><scriptsrc="modal.js"></script></body>

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:

after edit step 1

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

modal after 1

  1. 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:

modal after edit step 2

  1. 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:

modal after edit step three

  1. 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:

finished

And all should be good now.

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

Post a Comment for "How To Add A Modal To An Existing File?"