简单的jquery弹出层代码, 只要传入元素id或者class即可.

function js_dialog_turn(){
        var objname = '#js_dialog';
        if( $(objname).length <= 0)
            return false;
        
        if($(objname).is(":hidden")){
            $(objname).show();
        }else{
            $(objname).hide();
        }
        return false;
    }
    
    function js_dialog(obj, title){
        title = arguments[1]? arguments[1]: '弹出信息';
        var objsname = obj.replace(/#/g,'s');
        objsname = objsname.replace(/(\.)/g,'b');
        
        if( $('#js_dialog').length <= 0){
            $("body").append('<div id="js_dialog" style="display: none; background-color: white;">'+
            '<div id="js_dialog_content" style="border: 1px solid #A7C5E2;">'+
            '<h3 style="margin: 0; clear: both; background-color:#DBEEF9; border-bottom: 1px solid #A7C5E2; padding: 0; line-height: 24px; height: 24px; overflow: hidden;">'+
            '<span class="js_dialog_title" style="float: left;"></span>'+
            '<span onclick="js_dialog_turn();" style="float: right; cursor: pointer; color: red; width: 30px; text-align: center; font-weight: bolder;">X</span>'+
            '<span style="clear: both; height: 0px; line-height: 0px; font-size: 0; content:\'\';"></span>'+
            '</h3></div></div>');
        }else{
            if(!$('#js_dialog').is(":hidden")){
                js_dialog_turn();
                return false;
            }
        }
        
        if( $('#dialog_content_'+objsname).length <= 0 && $('#js_dialog').length > 0){
            $('#js_dialog_content h3').after('<div id="dialog_content_'+objsname+'" style="padding: 12px;"></div>');
            $('#dialog_content_'+objsname).append($(obj))
            $('#js_dialog').find(obj).show();
        }
        
        $("div[id^='dialog_content_']").hide();
        $('#dialog_content_'+objsname).show();
        obj = $('#js_dialog');
        $('.js_dialog_title').html(' '+title);
        $(obj).show();
        js_dialog_center(obj);
        $(window).scroll(function(){js_dialog_center(obj);});
        $(window).resize(function(){js_dialog_center(obj);});
    }
    
    function js_dialog_center(obj){
         var m_left = 6; // 左侧
         var m_top  = 32; // 右侧
         $(obj).css({
          "position": "absolute",
          "z-index":888,
          'top':(m_top + $(document).scrollTop()) +'px',
          'left':m_left +'px'
         });
         if($(obj).width() < 1200){$('#js_dialog_content').width(1200);}
         if($(obj).height() < 480){$('#js_dialog_content').height(480);}
    }

使用方法很简单:
js_dialog('.classname');  // 可以传入id:  #id
js_dialog('#idname', '我是标题');

简简单单, 滚动跟随.

你可能感兴趣的:(简单的jquery弹出层代码, 只要传入元素id或者class即可.)