Сделать маленькое окно всплывающим, используя div другой страницы - PullRequest
Новая
       44

Сделать маленькое окно всплывающим, используя div другой страницы

0 голосов
/ 30 марта 2020

Я хотел бы открыть небольшое всплывающее окно, используя div id со страницы входа. Я использовал iframe, который загружал содержимое страницы входа и пытался открыть с javascript. Но пока безуспешно.

Ниже приведено меню домашней страницы, с которой я пытаюсь открыть всплывающий логин: 

<ul>
          <li><a class="active" href="objectivos.html">Inicio&nbsp;&nbsp;&nbsp;/</a></li>
          <li><a href="mission.html">Nosostros&nbsp;&nbsp;&nbsp;/</a></li>
          <li><a href="equipos.html">Equipos&nbsp;&nbsp;&nbsp;/</a></li>
          <li><a href="#">Blog&nbsp;&nbsp;&nbsp;/</a></li>
          <li><a href="contact_us.html">Contacto&nbsp;&nbsp;&nbsp;/</a></li>
          <li><a href="#" onclick="openLogin();">Incio de Session&nbsp;&nbsp;&nbsp;/</a></li>
          <li><a href="objectivos.html#col2_form">Sign Up/Registrarse</a></li>
</ul>

ниже находится javascript домашней страницы: 

function openLogin(){
    var iframe = document.getElementById("loginframe");
    var loginDoc = iframe.contentDocument.getElementById("id01");
    console.log(loginDoc);
    loginDoc.style.display='block';
}

А ниже находится страница входа: 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/ciudad.css">
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
    <script src="https://kit.fontawesome.com/b99729a814.js" crossorigin="anonymous"></script>

</head>
<body>
    <div id="id01">
      <form class="modal-content" action="/action_page.php" method="post">

          <div class="login_container">
              <i class="fas fa-times"></i>
              <h1>Inicio de <span>Sesion</span></h1> 
              <hr/>
            <label for="uname"><b>Correo</b></label><br>
            <input type="text" placeholder="Tu Correo" name="email" required>
            <br><br>  
            <label for="psw"><b>Contrasena</b></label><br>
            <input type="password" placeholder="Contrasena" name="psw" required>
            <br><br> 
            <hr/>
            <button id="submit" type="submit">ENVIAR</button>

          </div>


      </form>
    </div>
</body>
</html>

Я ожидаю такого поведения: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_login_form_modal

1 Ответ

0 голосов
/ 30 марта 2020

Попробуйте

Добавить эту страницу меню

Javascript

<script>

function loadLoginPage() {
        var modal = document.createElement('iframe');
            modal.src = "login.html"; // Check exactly working path
            modal.id = "login_modal";
            modal.frameBorder = "0";
            modal.width = "450";
            modal.height = "450";
            document.getElementById("modal_container").appendChild(modal);
    }
function openLogin(){
    var loginControl = document.getElementById("modal_container");
    loginControl.style.visibility = "visible";
}
loadLoginPage();

</script>

CSS

<style>
    div#modal_container {
        position: absolute;
        top: 10%;
        z-index: 9999;
        background: #ccc;
        visibility: hidden;
    }
</style>

Внутри тела 

<div id="modal_container"></div>

Примечание: вам нужно добавить CSS анимацию, что вы хотите .

...