登錄彈出無法正常運行

我有以下的jsp：登錄彈出無法正常運行

<head lang="en"> 
<meta charset="UTF-8"> 
    <title>Data Platform - Real Time Monitor </title> 
    <script src="../dist/ag-grid-enterprise.js?ignore=notused30"></script> 
    <script src="../dist/loadingGrid.js"></script> 
    <script src="../dist/sortGrid.js"></script> 
    <style type="text/css"> 
    #popupbox{ 
      margin: 0; 
      margin-left: 40%; 
      margin-right: 40%; 
      margin-top: 50px; 
      padding-top: 10px; 
      width: 20%; 
      height: 150px; 
      position: absolute; 
      background: #FBFBF0; 
      border: solid #000000 2px; 
      z-index: 9; 
      font-family: arial; 
      visibility: hidden; 
    } 
    </style> 
    <script language="JavaScript" type="text/javascript"> 
     function login(showhide){ 
      if(showhide == "show"){ 
      document.getElementById('popupbox').style.visibility="visible"; 
      }else if(showhide == "hide"){ 
      document.getElementById('popupbox').style.visibility="hidden"; 
      } 
     } 
    </script> 
    <body style="height: 100%; margin: 0px;"> 
     <div id="popupbox"> 
      <form name="login" action="" method="post"> 
       <center>Username:</center> 
       <center><input name="username" size="14" /></center> 
       <center>Password:</center> 
       <center><input name="password" type="password" size="14" /></center> 
       <center><input type="submit" name="submit" value="login" /></center> 
      </form> 
      <br /> 
      <center><a href="javascript:login('hide');">close</a></center> 
     </div> 
<p><a href="javascript:login('show');">login</a></p>  
<div style="font-style:bold;font-size:30;color:black;"> Data Platform - Monitor

但是當我打開JSP，鏈接"login"出現在頂部，其上單擊顯示一個彈出框登錄，但是我仍然能夠在登錄之前看到頁面的所有內容。如何在加載頁面內容之前使該彈出框出現？此外，我只想設置一個用戶名和密碼，如果僅提供了該用戶名和密碼，則應該顯示頁面。如何完成這項工作？

來源

2016-10-20 Angad

您是否試圖在默認情況下隱藏表單？你並沒有首先運行'login（「hide」）''。編輯：對不起，沒有看到彈出窗格div。請下次參考身份證;） – AxelH

是的，請清理您的縮進。 – Soviut

您的login和close鏈接都在href屬性中有javascript，它應該在onclick屬性中代替。

<a onclick="login('show');">login</a>

通過在href（或不是與事件相關聯的任何其他屬性）的代碼被執行具有它。由於您的最後一個按鈕是javascript:login('show');，它將始終顯示登錄。

更好的是，您應該在腳本中完成所有工作。

document.getElementById('show-login').addEventListener('click', function(e) { 
    e.preventDefault(); // cancel the click, but run the following code 
    login('show'); 
});

這需要您爲登錄按鈕添加一個id屬性。

<a id="show-login">login</a>

來源

2016-10-20 14:33:32 Soviut

將它更改爲onclick後沒有任何事情發生。「登錄」現在不可點擊，所以甚至不能點擊彈出窗口，在加載頁面內容之前彈出窗口。 – Angad

登錄彈出無法正常運行

回答

相關問題