2012-08-13 16 views
0

我的html代碼:如何使用jquery添加彈出窗口?

<form id="room-from" method="post"> 
<input id="room" type="text" name="room" /> 
<input type="submit" id="save" name="save" /> 
</form> 

當我按下如果房間的文本字段爲空彈出應該出現在屏幕中央的保存按鈕,必須說輸入房間號。

的jQuery:

$("#save").submit(function(){ 
    if ($("#room").val() == "") 
{ 

} 
    }); 

我不知道如何做到這一點。

任何人都可以請幫我解決這個問題。

+0

你做了什麼研究嗎?試圖谷歌? – zerkms 2012-08-13 02:33:32

+0

你會想要搜索'modal',這個術語用於你的描述。有瘋狂的插件等可用。 Twitter的引導程序相當不錯,但就像我說的,有很多可用的選項。看一看。 – Jeemusu 2012-08-13 02:41:44

回答

4

你應該使用模態窗口和jQuery UI它會讓你的生活更輕鬆

http://jqueryui.com/demos/dialog/

+1

謝謝,但我已經使用jquery-mobile彈出窗口。 – Newbie 2012-08-14 17:39:46

+0

不錯的人不知道它存在。 Thanx – themis 2012-08-14 17:59:12

0

更新:添加取消提交。

$("#save").submit(function(event){ 
     if ($("#room").val() == "") 
     { 
       alert("enter a room number"); 
       event.preventDefault(); 
     } 
    }); 
+0

也可以檢查'!$(「#room」)。val()' – Aesthete 2012-08-13 02:35:59

+0

並取消提交也許? – mplungjan 2012-08-13 03:00:48

+0

哦,是的,完成,更新。 – levi 2012-08-13 03:10:11

0
$("#save").submit(function(){ 
    if ($("#room").val() == "") { 
     $("#site_blackout").fadeIn(200); 
     $("#popup_modal").fadeIn(400); 
    } 
}); 

然後,只需使用CSS居中popup_modal和風格的site_blackout。

+0

並取消提交也許? – mplungjan 2012-08-13 03:00:12

+0

謝謝,但我使用了jquery-mobile彈出窗口。 – Newbie 2012-08-14 17:40:48