For example, I have a home page with 2 buttons "show login popup" and "show register popup", and it can popup 2 windows on the homepage. Those 2 popup are divs in the homepage. I keep those 3 html separate, because I want the login and register can shows on any pages as a popup box.
Here is my problem: I have a same "show register popup" button in the login popup page, too. I want to do that, when I click the button, it can hide the login popup (the div in the home page) and "show register popup" on the home page. What should I do?
Here is my code example:
Home Page
<!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>
Login Popup
<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>
Register Popup
<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";
}
I set the height to a px
value, and removed the <object>
tag for simplicity. My guess is there is something wrong with your object tag, I have not used it to import html the way you are trying to.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.