2017-11-12 7 views
0

HTMLコードでは、ボタンを登録またはログインのいずれかにリンクするだけで、ユーザーがいずれかに興味がなく、ページを閉じることを決定した場合は、彼がリストを見ることに興味があるかどうか(多分ダイアログボックスを介して)、それから彼が「はい」をクリックすると、リストページに行く。ページを離れるユーザーの操作

私は、最初にリストリンクボタンを非表示にして、onbeforeunloadを介してページが閉じるかリフレッシュするときに呼び出される関数myFunctionで表示可能にすることにしました。

このように機能しても、表示されるダイアログボックスには「このページには残したいことを確認するように求めています。入力されたデータは安全ではない可能性があります。私が帰った後にタイプするものの代わりに。 いくつかの理由から、私はまだ質問を投稿することはできませんので、私にご負担ください。 これはデフォルトのコンテンツのようです。これはどうですか? また、より良い方法がありますか?ここで

は私のHTMLコードです:

` <!DOCTYPE HTML> 
<html> 
<head> 

     <link rel="stylesheet" type="text/css" href="CSS/a.css"> 

</head> 


<body onbeforeunload="return myFunction()"> 
     <h3>Click the appropriate button</h3> 
     <div> 
       <a href="Reg.html"><button style="background-color:red; color:white;">Register</button></a> <br><br> 
       <a href="Login.html"><button style="background-color:red; color:white;">Login</button></a> <br><br> 
       <a href="Listings.html"><button class="hidden" id='marketing' style="background-color:green; color:white;">View Listings</button> 
     </div> 
<script> 
     function myFunction() { 
       document.getElementById('marketing').style.display='block'; 
       return "Do you want to view listings without registering?"; 

} 
</script> 

</body> 
</html>` 

そして、私のCSSコード:

input[type=text], select { 
    width: 100%; 
    padding: 12px 20px; 
    margin: 8px 0; 
    display: inline-block; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-sizing: border-box; 
} 

input[type=submit] { 
    width: 100%; 
    background-color: #4CAF50; 
    color: white; 
    padding: 14px 20px; 
    margin: 8px 0; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
} 

input[type=submit]:hover { 
    background-color: #45a049; 
} 

div { 
    border-radius: 5px; 
    background-color: #f2f2f2; 
    padding: 20px; 
} 

.hidden{ 
     display:none; 
} 





    [1]: https://i.stack.imgur.com/Q1a9W.png 

答えて

0

私はちょうどちょうど楽しむw3schools

からあちこちでそれをリッピング何書くために、忘れてしまいました

function myFunction() { 
 
    var txt; 
 
    var r = confirm("Press a button!\nEither OK or Cancel.\nThe button you pressed will be displayed in the result window."); 
 
    if (r == true) { 
 
     window.location.href = "https://stackoverflow.com/" 
 
    } else { 
 
     txt = "You pressed Cancel!"; 
 
    } 
 
    document.getElementById("demo").innerHTML = txt; 
 
}
<h3>Click the appropriate button</h3> 
 
     <div> 
 
       <a href="Reg.html"><button style="background-color:red; color:white;">Register</button></a> <br><br> 
 
       <a href="Login.html"><button style="background-color:red; color:white;">Login</button></a> <br><br> 
 
       <button id='marketing' onclick="myFunction()" style="background-color:green; color:white;">View Listings</button> 
 
     </div> 
 
     
 
     <p id="demo"> 
 
     
 
     </p>

+0

申し訳ありません、説明するには高すぎます –

+0

あなたは私の問題を理解していません。ユーザーがタブを閉じることを決定したときにのみ、ビューの一覧が(ダイアログボックスとともに)表示されます。私はそれをonbeforeunloadを通してやっていますが、そのボックスの内容を制御することはできません。 –

関連する問題