2016-12-19 10 views
1

たとえば、「show login popup」と「show register popup」の2つのボタンを持つホームページがあり、ホームページに2つのウィンドウがポップアップ表示されます。それらの2つのポップアップはホームページのdivです。私はログインと登録が必要なので、これらの3つのHTMLを別々にして、ポップアップボックスとしてどのページにも表示することができます。別の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"; 
} 

答えて

0

高さを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>

+0

私はあなたが理解し欠場と思うが、私は別のページからこのページを編集することができますJavaScript関数をしたい、例えば、私は3 htmlページ、ページA、LOGINポップアップを持って、POPUPを登録します。両方のポップアップはページAに表示できますが、現在のポップアップボックスを閉じてページAのREGISTER POPUPを開くことができる「登録する」というLOGIN POPUPのボタンがあります。私は説明がうまくいかない。 – kamil

関連する問題