通過lightBox效果登錄表單

Question

我使用了最簡單的CSS來顯示litebox視圖。 我使用的代碼是，我從這里刪除了不必要的CSS屬性：

<style>
        .black_overlay{
            display: block;

        }
        .white_content {
            display: block;

        }
    </style>

HTML格式

 <div id="light" class="white_content">      
        <input id="name" name="name" type="text" />

        <input id="password" name="password" type="password" />
        <input type="submit" name="submit" value="Sign In" onclick="check(this.form)"/>

        </div>

        <div id="fade" class="black_overlay"></div>

還有一個JavaScript函數，用於檢查字段是否正確

function check(form)/*function to check userid & password*/
{

var name= $( "#name" );
var pass=$("#password");
 if(name== "admin" && pass == "admin")
  {
  document.getElementById('light').style.display='none';
  document.getElementById('fade').style.display='none';
  }
 else
 { 
   alert("Error Password or Username");/*displays error message*/
  }
}

我想要的功能是，當用戶輸入正確的名稱並通過時，即“管理員”，Lite框效果消失了……但事實並非如此，Lite框仍然存在。 我如何關閉它。 我還希望該litebox效果應在頁面加載時顯示。

Answer 1

更換

var name= $( "#name" );
var pass=$("#password");

與

var name= $( "#name" ).val();
var pass=$("#password").val();

Answer 2

是否存在捕獲和阻止提交事件的問題？ 在標記中沒有表格。 如果您喜歡添加

<form id="submit-me"> your form inputs </div>

你可以通過JS觀察它

$("#submit-me").submit(function(event) {
  // your js code
  event.preventDefault();
});

對於您的實際示例，您可以嘗試添加“ return false;”。 在onclick處理程序中？ 但是我不知道這是否有效...

最好的祝福