如何使用 jquery 添加弹出窗口

How to add a pop up using jquery?

本文关键字:窗口 添加 何使用 jquery      更新时间:2023-09-26

我的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() == "")
{
}
    });

我不知道该怎么做。

谁能帮我解决这个问题。

你应该使用模态窗口和jQuery UI,它会让你的生活变得轻松

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

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

然后只需使用 CSS 将popup_modal居中并设置site_blackout样式即可。

更新:添加了取消提交。

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