通過燈箱登錄表單效果

我用一個最簡單的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*/ 
    } 
}

我想要的功能是，當用戶輸入正確的名稱和通過，即「管理員」的精簡盒效果消失...但它不是，精簡盒仍然存在。我怎樣才能關閉它。我也希望這個litebox效果應該在頁面加載時顯示。

來源

2012-04-18 Hanya Idrees

更換

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

與

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

來源

2012-04-18 19:31:02 d4rkpr1nc3

我加入上面的代碼

最好的問候，但同樣的事情發生了，精簡版盒效應仍然存在。還有ww.php？name = admin＆password = admin＆submit = Sign +在這裏每次都會出現在地址欄上，因爲我點擊登錄 – 2012-04-18 19:35:04

@HanyaIdrees，請使用.val（），正如我在上面更正的那樣。你有沒有嘗試過？ – axcdnt 2012-04-18 19:36:41

@axcdnt我試過了，但結果相同。不知道爲什麼。？ – 2012-04-18 19:37:33

那是提交事件問題未捕獲和預防？在標記中沒有任何形式。如果添加它像

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

你可以通過JS

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

觀察它對於你的實際例如，你可以嘗試添加「返回false;」在onclick處理程序？但我不知道這是否工程...

來源

2012-04-18 19:42:43

通過燈箱登錄表單效果

回答

相關問題