页面中小窗口的设计

想实现点击跳出小窗口，个人在经过尝试后给出以下方法

一：

Div的影藏与显示，并控制好div的大小就可以了。通过点击按钮控制div层的出现来达到小窗口的功能。

显示：

$("#add").css("display","block");

影藏：

$("#add").css("display","none");

• Div的css设计：

div.popup
{
    display: none; 
    position: absolute; 
    top: 25%; 
    left: 22%; 
    width: 53%; 
    height: 49%; 
    padding: 8px; 
    border: 8px solid #E8E9F7; 
    background-color: white; 
    z-index:1002; 
    overflow: auto;
}

---

二：

当然，也可以将jsp页面放入div层中，制作出一个模态窗口，以达到更好的效果。

• 主jsp页面：

<div class="modal fade" style="heigth:1000px" id="userDialog" tabindex="-1" role="dialog" aria-labelledby="versionEditLabel" aria-hidden="true"></div>

function addUserView(){
    $.ajax({
        type: "post",
        url: "/cms/namelist.action",
        dataType: "html",
        success: function(data, textStatus){
            $("#userDialog").html(data);
            $("#userDialog").modal();
        },
        error: function()
        {
            alert("worring");
        }
    });
}

模态窗口 jsp页面：写什么都行，在此省略。

• 后台action:

@RequestMapping(value = "namelist")
    public String nameList(ModelMap model,HttpServletRequest request, HttpServletResponse response) throws Exception 
    {
        String[] mainfood={"双层鸡腿汉堡"};
        List<String> list = new ArrayList<String>();
        for(int i=0;i<mainfood.length;i++)
        {
            list.add(mainfood[i]);
        }
        model.put("list",list);
        return "digest/packageAdd";
    }

通过action返回一个jsp页面，ajax在前台将其放入model中，即可实现模态窗口效果。

本人界面做的略差，但希望大家能接受方法。