CODEWITHSUNDEEP
javascripthtmlcss
user14495913
user14495913

Reputation:

How to add a modal to an existing file?

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. Thank you.

I have tried placing the modal code after the nav, but it just broke the whole website. The form showed up, just without the CSS.

Here is where I want to put the modal, I want it to open when I click the anchor tag "Acessar". I don't know where to put it, since the button who is going to open it is inside the navbar (yes, the button is the anchor tag, still have to change that).

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

  <nav>
    <input type="checkbox" id="check">
    <label for="check">
          <i class="fas fa-bars" id="btn"></i>
            <i class="fas fa-times" id="cancel"></i>
        </label>
    <img src="logo-solo.png">
    <ul>
      <li><a href="#home"> Home</a></li>
      <li><a href="#quem-somos">Quem somos</a></li>
      <li><a href="#onde-atuamos">Onde  Atuamos</a></li>
      <li><a href="#servicos">Servicos</a></li>
      <li><a href="#Depoimentos">Depoimentos</a></li>
      <li><a href="#Comecando">comecando</a></li>
      <li><a href="#sac">Contacte-nos</a></li>
      <a href="https://www.instagram.com/mmtuniversity_oficial/" class="fa fa-instagram" target="_blank"></a>
      <a href="https://www.youtube.com/channel/UCuf2KhhA8Ub3hcSgfaziiDw" class="fa fa-youtube" target="_blank"></a>
      <a class="cta" rel="modal:open" href="#ex1" key="login" id="myBtn">Acessar</a>
    </ul>
  </nav>

  <script type="text/javascript">
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function(e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
          behavior: 'smooth'
        });
      });
    });
  </script>

  <section class="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>

Here is my modal code (ps: the last line, the button, is to be changed by the one on the navbar)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

<div id="myModal">
  <div class="container" id="container">
    <div class="form-container sign-up-container">
      <form action="#">
        <h1>MMT University</h1>
        <span>Se registre para começar</span>
        <input type="text" placeholder="Usuário" />
        <input type="email" placeholder="Email" />
        <input type="password" placeholder="Senha" />
        <input type="password" placeholder="Repita a sua senha" />
        <button>Registrar</button>
      </form>
    </div>
    <div class="form-container sign-in-container">
      <form action="#">
        <h1>Acessar</h1>

        <span>Acesse a MMT University</span>
        <input type="email" placeholder="Email" />
        <input type="password" placeholder="Senha" />
        <a href="#">Esqueceu a senha?</a>
        <button>Acessar</button>
      </form>
    </div>
    <div class="overlay-container">
      <div class="overlay">
        <div class="overlay-panel overlay-left">
          <h1>Bem vindo!</h1>
          <p>Para continuar aprendendo, acesse a sua conta!</p>
          <button class="ghost" id="signIn">Sign In</button>
        </div>
        <div class="overlay-panel overlay-right">
          <h1>MMT University!</h1>
          <p>Se registre para entrar na melhor universidade trading do mundo.</p>
          <button class="ghost" id="signUp">Registre-se</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="main.js"></script>
<script src="modal.js"></script>

<button href="#ex1" rel="modal:open" id="myBtn">Acessar</button>

Also, do I just paste the CSS of the modal file into these ones?

Thank you.

EDIT:

This is what my code looks like

https://repl.it/repls/VastGorgeousPlot#index.html

I the modals button are not accessible, I cannot close it and the whole body becomes a modal behind this container.

Upvotes: 0

Views: 216

Answers (1)

marsnebulasoup
marsnebulasoup

Reputation: 2660

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 ...
    <div id="modalContainer" class="modal">
        <div id="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 modal
var 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"
  }
  else if (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>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
  <link rel="stylesheet" href="style.css" />

  <nav>
    <input type="checkbox" id="check">
    <label for="check">
          <i class="fas fa-bars" id="btn"></i>
            <i class="fas fa-times" id="cancel"></i>
        </label>
    <img src="logo-solo.png">
    <ul>
      <li><a href="#home"> Home</a></li>
      <li><a href="#quem-somos">Quem somos</a></li>
      <li><a href="#onde-atuamos">Onde  Atuamos</a></li>
      <li><a href="#servicos">Servicos</a></li>
      <li><a href="#Depoimentos">Depoimentos</a></li>
      <li><a href="#Comecando">comecando</a></li>
      <li><a href="#sac">Contacte-nos</a></li>
      <a href="https://www.instagram.com/mmtuniversity_oficial/" class="fa fa-instagram" target="_blank"></a>
      <a href="https://www.youtube.com/channel/UCuf2KhhA8Ub3hcSgfaziiDw" class="fa fa-youtube" target="_blank"></a>
      <a class="cta" rel="modal:open" href="#ex1" key="login" id="myBtn">Acessar</a>
    </ul>
  </nav>

  <script type="text/javascript">
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function(e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
          behavior: 'smooth'
        });
      });
    });
  </script>

  <section class="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>

  <div class="modal" id="modalContainer">
      <div class="container" id="myModal">
        <div class="form-container sign-up-container">
          <form action="#">
            <h1>MMT University</h1>
            <span>Se registre para começar</span>
            <input type="text" placeholder="Usuário" />
            <input type="email" placeholder="Email" />
            <input type="password" placeholder="Senha" />
            <input type="password" placeholder="Repita a sua senha" />
            <button>Registrar</button>
          </form>
        </div>
        <div class="form-container sign-in-container">
          <form action="#">
            <h1>Acessar</h1>

            <span>Acesse a MMT University</span>
            <input type="email" placeholder="Email" />
            <input type="password" placeholder="Senha" />
            <a href="#">Esqueceu a senha?</a>
            <button>Acessar</button>
          </form>
        </div>
        <div class="overlay-container">
          <div class="overlay">
            <div class="overlay-panel overlay-left">
              <h1>Bem vindo!</h1>
              <p>Para continuar aprendendo, acesse a sua conta!</p>
              <button class="ghost" id="signIn">Sign In</button>
            </div>
            <div class="overlay-panel overlay-right">
              <h1>MMT University!</h1>
              <p>Se registre para entrar na melhor universidade trading do mundo.</p>
              <button class="ghost" id="signUp">Registre-se</button>
            </div>
          </div>
        </div>
    </div>
  </div>
  <script src="main.js"></script>
  <script src="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

Upvotes: 1

Related Questions