How to add a modal to an existing file?

前端未结

关注

 1  344

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

相关标签:

1条回答

情书的邮戳

2021-01-26 03:55

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

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.

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:

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:

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:

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

0 讨论(0)