时间戳

首页 > 解决方案 > 使用另一个页面的 div 弹出小窗口

javascript - 使用另一个页面的 div 弹出小窗口

问题描述

我想使用登录页面中的 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

标签： javascripthtmlpopup

解决方案

尝试一下

添加此菜单页面

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 动画。

推荐阅读