Всплывающее окно входа в javascript работает не так, как ожидалось

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

У меня есть следующий 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" , при нажатии на которую отображается всплывающее окно для входа в систему, однако я все еще могу просмотреть все содержимое страницы перед входом в систему. Как мне сделать так, чтобы это всплывающее окно появлялось перед загрузкой содержимого страницы?
Кроме того, я хочу установить только одно имя пользователя и пароль, и если указано только это, должна отображаться страница. Как это сделать?

1. Вы пытались скрыть форму по умолчанию? Вы не запускались login("hide") в первую очередь. РЕДАКТИРОВАТЬ: Извините, не увидел div всплывающего окна. Пожалуйста, поработайте над идентификацией в следующий раз 😉

2. Да, пожалуйста, очистите свой отступ.

Ответ №1:

У ваших 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>

1. После изменения его на onclick ничего не происходит. «login» теперь не доступен для просмотра, поэтому даже не могу получить всплывающее окно при нажатии на него, не говоря уже о том, что всплывающее окно появляется перед загрузкой содержимого страницы.