javascript - 如何使用 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 的样式。