如何使用jquery添加弹出窗口？

Question

我的HTML代码：

<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() == "")
{

}
    });

我不知道该怎么做。

任何人都可以帮我解决这个问题。

Answer 1

你应该使用模态窗口和jQuery UI，这将使你的生活变得轻松

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

Answer 2

更新：取消提交已添加。

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

Answer 3

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

然后只需使用CSS来设置popup_modal的中心并设置site_blackout的样式。