页面中小窗口的设计

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

一：

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中，即可实现模态窗口效果。

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