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 をスタイルします。