Question

例如，我有一个带有2个按钮“show login popup”和“show register popup”的主页，它可以在主页上弹出2个窗口。这2个弹出窗口是主页中的div。我将这3个html分开，因为我希望登录和注册可以在任何页面上显示为弹出框。

这是我的问题：我在登录弹出页面中也有一个“show register popup”按钮。我想这样做，当我点击按钮时，它可以隐藏主页上的登录弹出窗口（主页中的div）和“show register popup”。我该怎么办？

这是我的代码示例：

主页

 <!DOCTYPE>
<html>
<head>
<title>Home page</title>
<meta charset="UTF-8">
<script src="testjs.js"></script>

</head>

<body>
    <button id="login" onclick="goto_login()">goto login</button>
    <button id="register" onclick="goto_register()">goto register</button>
    <div id="loginPopup" style ="background-color:red; display:none;">
        <object id="login_location" type="text/html" data="login.html"
            style="width:100%; height:50%;">
        </object>
    </div>

    <div id="registerPopup" style="background-color: yellow; display:none;">
         <object id="login_location" type="text/html" data="regi.html"
            style="width:100%; height:50%;">
        </object>
    </div>
</body>
</html>

登录弹出窗口

<html>
<head><script src="testjs.js"></script></head>
<body>

    <input id="id" type="text">
    <input id="pw" type="text">

    <input id="login" type="button" value="login">

    <input id="goto_register" onclick="goto_register()" type="button" value="goto-register">
</body>
</html>

注册弹出窗口

<html>
<head><script src="testjs.js"></script></head>
<body>

    <input id="id" type="text">
    <input id="pw" type="text">


    <input id="register" onclick="goto_register()" type="button" value="register">
</body>
</html>

的JavaScript

function goto_login() {
var loginPopup  =  document.getElementById("loginPopup");
var registerPopup = document.getElementById("registerPopup");

loginPopup.style.display="block";
registerPopup.style.display="none";
}

function goto_register() {
var loginPopup  = document.getElementById("loginPopup");
var registerPopup = document.getElementById("registerPopup");

loginPopup.style.display="none";
registerPopup.style.display="block";
}

function close_pop() {
var loginPopup  = document.getElementById("loginPopup");
var registerPopup = document.getElementById("registerPopup");

loginPopup.style.display="none";
registerPopup.style.display="none";
}

Answer 1

我将高度设置为px值，并为简单起见删除了<object>标记。我的猜测是你的对象标签有问题，我没有用它来按照你想要的方式导入html。

function goto_login() {
  var loginPopup = document.getElementById("loginPopup");
  var registerPopup = document.getElementById("registerPopup");

  loginPopup.style.display = "block";
  registerPopup.style.display = "none";
}

function goto_register() {
  var loginPopup = document.getElementById("loginPopup");
  var registerPopup = document.getElementById("registerPopup");

  loginPopup.style.display = "none";
  registerPopup.style.display = "block";
}

function close_pop() {
  var loginPopup = document.getElementById("loginPopup");
  var registerPopup = document.getElementById("registerPopup");

  loginPopup.style.display = "none";
  registerPopup.style.display = "none";
}

<button id="login" onclick="goto_login()">goto login</button>
<button id="register" onclick="goto_register()">goto register</button>
<div id="loginPopup" style="background-color:red; display:none;width:100%; height:300px;">
  <input id="id" type="text">
  <input id="pw" type="text">

  <input id="login" type="button" value="login">

  <input id="goto_register" onclick="goto_register()" type="button" value="goto-register">
</div>
<div id="registerPopup" style="background-color: yellow; display:none;width:100%; height:300px;">
  <input id="id" type="text">
  <input id="pw" type="text">


  <input id="register" onclick="goto_register()" type="button" value="register">
</div>

如何通过单击另一个html页面上的按钮来编辑页面？

1 个答案: