jquery-精华-弹出层

1.获取元素位置

    getPosition.js

            $(function() {
                $('#top-search').bind(
                    'keyup',
                    function() {
                        var pos = getElementPos('top-search');
                        var top = pos.y+16;
                        var left = pos.x-3;
                        $('#div_search_tip').attr('style',"top:"+top+"px;left:"+left+"px; ");
                        $('#div_search_tip').html("<img src='template/images/loading2.gif' /> 请稍候... ");
                        $('#div_search_tip').show();
                        $.post('index.php?action=msg&type=search_tip',{str_keyword:$('#top-search').val()},function(data) {
                          if( data==1 ) {
                            $('#div_search_tip').hide();
                          } else {
                            $('#div_search_tip').html(data);
                            $('#div_search_tip').show();
                          }
                        });
                    }
                )

                function showReplyMsg( id,type ) {
                    $.ajax({
                        type: "POST",
                        url: 'index.php?action=msg&type=show_reply_msg',
                        data: 'int_id='+id+'&int_type='+type,
                        success: function(data) {
                            var pos = getElementPos('reply_msg_'+id);
                            var top = pos.y-300;
                            var left = pos.x-500;
                            $('#open_window').html(data);
                            $('#open_window').show();
                            $('#msg_open_window').attr('style',"top:"+top+"px;left:"+left+"px;width:600px;height:250px;");
                            $('#bg_div').show();
                            $('#bg_div').addClass("background-div");
                            $('#bg_div').css({width:document.body.clientWidth,height:document.body.clientHeight});
                        }
                    });
                }


2.弹出窗口

            function showProcessData( numId ) {
                $('#status_data_process_'+numId).html('<img src="template/images/loading2.gif"></img> 请稍候...');
                $('#status_data_process_'+numId).show();
                formAllValue = $('#form_data_process_'+numId).serialize();
                $.ajax({
                    type: "POST",
                    url: 'index.php?action=data&type=show_process_data',
                    data: formAllValue,
                    success: function(data) {
                        $('#status_data_process_'+numId).hide();
                        $('#open_window').html(data);
                        $('#open_window').show();
                        $('#bg_div').show();
                        $('#bg_div').addClass("background-div");
                        $('#bg_div').css({width:document.body.clientWidth,height:document.body.clientHeight});
                    }
                });
            }

            function closeBgDiv( strKeyword ) {
                $.ajax({
                    type: "POST",
                    url: 'index.php?action=data&type=unlock_data_edit',
                    data: {str_keyword:strKeyword},
                    success: function(data) {
                        $('#open_window').html('');
                        $('#open_window').hide();
                        $('#bg_div').hide();
                    }
                });
            }

            .open_window {
                position:absolute;
                top:100px;
                left:163px;
                z-index:10000;
                margin:5px;
                padding:5px;
                border:1px solid #E6E6FA;
                background:#fff;
                width:80%;
                height:90%;
            }

            .background-div {
                background-color:#66CCFF;
                filter:alpha(opacity=30);
                -moz-opacity: 0.4;
                position:absolute;
                z-index:1000;
                top:0px;
                left:0px;
            }

            .status {
                border:1px solid #EE82EE;
                background:#FFF8DC;
                display:none;
                margin-top:10px;
                padding:10px;
            }

            <div id="open_window">
            </div>
            <div id="bg_div">
            </div>