javascript弹出层制作

<?php
    header("Content-type:text/html;charset=utf-8;");
?>
<body>
<a href="javascript:void(shoplist({LID:321}));">显示</a>
<script type="text/javascript" src="./public/js/jquery-1.4.4.min.js"></script>
<style type="text/css">
    /*背景层*/
    #openDiv {
        background:gray;height:100;width:100%;position:absolute;z-index:9999;left:0;top:0;margin:0;
        text-align:center;vertical-align:middle;
    }
    /*包容层*/
    #createWrap{
        background:#fff;height:400px;width:500px;position:absolute; z-index:9999;left:0;top:0;margin:0;
        margin-left:auto;margin-right:auto;
    }
    #createWrap ul{
          text-align:left; width:480px; overflow:hidden;
    }
    #createWrap #data, #createWrap .open_page{
        padding:5px;
    }  
    #createWrap ul li{
        float:left; width:200px; margin-top:3px;margin-bottom:3px;
    }
    #createWrap ul.bold li{
        font-weight:bold;
    }
    /*关闭按钮*/
    #createWrap .close{
        text-align:right;
        background:#ccc; 
    }
    #createWrap .close .btn_close{
        cursor:pointer; color:#2A79BE;
        margin-right:10px;
    }
    #createWrap .open_foot{
        text-align:center;
        margin-top:10px;
        cursor:pointer;
        color:#2A79BE;
        background:#ccc;
        height:30px;
        line-height:30px;
        font-weight:700;
        position:absolute;bottom:0;width:100%;
        font-size:14px;
    }
    #createWrap .open_page{
        margin-top:10px;
    }
    #createWrap .open_page .open_btn{
        color:#2A79BE;
        cursor:pointer;
    }
</style>
<script type="text/javascript">
function shoplist(info){
    var LID=info.LID;
    //判断是否为翻页或搜索商家名,如果为翻页或搜索商家则不需要加载背景层和默认数据
    if(info.page || info.shopName!=null ){
        init=false;
    }else{
        init=true;
    }
    var thepage=info.page?info.page:1;
    var shopName=info.shopName;
    var order = {
        createWrap:function(){
             $(document.body).append(   '<div id="openDiv"></div>'+
                                            '<div id="createWrap" style="">'+
                                                '<div class="close">'+
                                                    '<span class="btn_close">关闭</span>'+
                                                '</div>'+
                                                '<div class="search">'+
                                                    '<span style="flost:left;"><input type="text" id="shopName" /><a href="javascript:void(0);"                                                 '</div>'+
                                            '<div id="data"></div>'+
                                            '<div id="open_page"></div>'+
                                            '<div class="open_foot"1><span id="ajax_submit">提交更改</span></div>'+
                                        '</div>');
        },
        closeWrap:function(){
            $('#openDiv').remove();
            $('#createWrap').remove();
        },
        initTable:function (cb) {
            $("#open_page,.open_foot").hide();
            cb({data:[{ResDisplayName:'B00531',Sort:1},{ResDisplayName:'B00532',Sort:2},{ResDisplayName:'B00533',Sort:3}]});
               
        },
        initTableCb: function (data) { 
            var shopListHtml = data.data; 
              
            var reg = /\{([\w]+)\}/gi;
            var shopListTpl = '<ul>' +
                    '<li>' +
                        '{ResDisplayName}' +    //商家名称
                    '</li>' +
                    '<li>' +
                        '<input type="text" class="input_sort" ResCode="{ResCode}" LID="{LID}" value="{Sort}" /> ' +  //商家名
                    '</li>' +
                '</ul>' ;
            var pageTpl='<div class="open_page">'+
                        '<span class="open_btn"    +
                        '<span class="open_btn"    +
                        '<span class="open_btn"    +
                        '<span class="open_btn"     +
                        '<span>共{curPage}/{p_last}页{p_total}条记录</span>'+
                        '</dvi>'; 
            var shopListHtml = "";
            var shopData = data.data;
            var initpager = data.initpager;
            shopListData={};
            for (var i in shopData)
            {
                var shop = shopData[i]; 
                
                shopListData.ResCode=shop.ResCode;
                shopListData.ResDisplayName=shop.ResDisplayName;
                shopListData.Sort=shop.Sort;
                shopListData.LID=shop.LID;
                  
                if (shop.length <= 0)
                {
                    shopListData.Name = "暂无";
                    shopListData.shoplink = "javascript:void(0);"
                    shopListData.target= '';
                }
                  
                var str = shopListTpl.replace(reg, function ($1, key) {
                    return shopListData[key];
                });
                if(shopListHtml){
                    shopListHtml+=(str);
                }else{
                    shopListHtml=str;
                }
            }
              
           //设置弹出层样式
           order.loadWrap(shopListHtml);
        },
        //显示弹出层
        loadWrap: function(htmldata){
            //装入包容层   
            $("#createWrap #data").html(htmldata); 
            $("#openDiv").css('height',$(document).height());
               
            order.goCenter();
            $(window).scroll(function(){
                setTimeout(function(){  
                    order.goCenter();
                },250);
            });
            //注册关闭事件
            $(".btn_close").click(function(){
                order.closeWrap();
            });
            if(htmldata!="数据导入中..."){
                //注册提交修改事件
                order.ajax_submit();
            }
        },
        //居中显示
        goCenter:function(){
            $("#openDiv").css('opacity',0.7);
            $("#createWrap").css('opacity',1);
            var left=(parseFloat($("#openDiv").css('width'))-parseFloat($("#createWrap").css('width')))/2;
            $("#createWrap").css('left',left);
            var top=($(document).height()-parseFloat($("#createWrap").css('height')))/2+parseFloat($(window).scrollTop());
            top=parseFloat(top)>0?top:0;
            $("#createWrap").css('top',top);
                  
            /*$("#createWrap").animate({
                top: top,
                left: left
              },"fast");
            */         
        },
        ajax_submit:function(data){
            $("#ajax_submit").unbind().click(function(){
                var a = [];
                $(".input_sort").each(function(){
                    var o ={};
                    var ResCode = $(this).attr("ResCode");
                    var Sort = $(this).val();
                    var LID = $(this).attr("LID");
                    o.ResCode=ResCode;
                    o.Sort = Sort;
                    o.LID = LID;
                    a.push(o);
                });
                $.ajax({
                    url: "/member/memberlabel/upshoplabel/type/json",
                    dataType: "json",
                    type: "POST",
                    data: {data:a},
                    success: function (data) {
                        alert(data.info);
                    }
                });
            });
        }
    }
    if(init){
        order.createWrap(); 
    }
    order.loadWrap();
    order.initTable(order.initTableCb); 
    order.goCenter();
}
   
</script>
</body>


你可能感兴趣的:(JavaScript,制作)