Всплывающее изображение не открывается по ссылке Подробнее, используя jQuery - PullRequest
Новая
       15

Всплывающее изображение не открывается по ссылке Подробнее, используя jQuery

0 голосов
/ 16 июня 2011

Я хочу открыть всплывающее окно ссылки «Изображение на дополнительной информации», но я не получаю всплывающее изображение для этого .. Это код ссылки на дополнительную информацию. 

 <a href="#?w=700" rel="popup2" class="poplight">
                    <div class="meta">
                    <div class="show-more-info">+ More Info</div>
                    </div>
                    </a>

И это часть вопроса. 

<script>

var id_popover_content = '#popover_content';
var id_popover = '#popover';
var id_popover_mask = '#popover-mask';

var template_popover_waiting    = '<div class="waiting"></div>';

var current_doc_info = {id:'', url:'', title:'', repo:'', app:'docsearch2', ts:'', user:''};

var template_popover = '<div id="popover" class="popover"><div class="content clearfix"><div class="t"></div><div id="popover_content"></div></div><div class="b"><div></div></div></div>';
var template_meta = '<p class="item"><span class="label">{label}</span><span class="data">{data}</span></p>';



var template_popover= '<div id="popup-meta"><h4>Meta Data</h4><div class="popup-content"><div class="waiting">Getting meta data&#8230;</div></div></div><div id="popup-revisions"><h4>Revision Info</h4><div class="popup-content"><div class="waiting">Getting revisions info&#8230;</div></div></div><div id="popup-where"><h4>Where Used Info</h4><div class="popup-content"><div class="waiting">Getting where used info&#8230;</div></div></div>';


        $('body').append($('<div id="popover-mask"></div>'));

        $(id_popover_mask).click(on_popover_close);

        $('body').append($(template_popover));




$('.show-more-info').live('click', function(e) {

        alert("helo");
        e.preventDefault();

        //$(this).addClass('active');

        show_popover_mask();

        // Position the popover
        var offset = $(this).offset();
        var left = offset.left - 442;
        var top = offset.top + 5;
        left = left + 'px';
        top = top + 'px';
        $(id_popover).stop(true, false).show().css({left: left,top: top}).attr('class', 'popover popover-show-info');

        // Get service class
        //current_doc_info.id = $('a', $(this).parent().parent().parent().parent()).html();

         current_doc_info.id = $('a', $(this).parent().parent().parent()).html();

        var id1 = $('a', $(this).parent().parent().parent().parent().parent().parent().parent()).html();

        //alert("heloo: " +id);
        //alert("helooss: " +id1);
        //alert($(this).parent().parent().parent().parent().html());


        $(id_popover_content).css({width:'500px'}).html(template_popover);
                on_show_info();
    });

var show_popover_mask = function() {
alert("a1");
        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
        alert(maskHeight);

        //Set height and width to mask to fill up the whole screen
        $(id_popover_mask).css({
                'width': maskWidth,
                'height': maskHeight
        });

        //transition effect
        $(id_popover_mask).show().css({
                opacity: '0.33'
        });
    };


        var on_popover_close = function(e) {

        //e.preventDefault();
        $(id_popover_mask).hide();

        $(id_popover).hide();



        $('.show-more-info').removeClass('active');
    };

var on_show_info= function() {
                alert("aa");
                request_meta_info = $.ajax({
                url: search_metadata + current_doc_info.id,
                type: 'GET',
                async: false,
                            dataType: "xml",
                success: on_get_metadata,
                error: on_get_metadata_error

        });



    };


    var on_get_metadata= function(data, text_status, XMLHttpRequest) {

        alert(data);
        var html = '';
        var info = {};

        $(data).find('str').each(function() {

                info = {};
                info.data = $(this).attr('value');

                var name = $(this).attr('name');
                alert(name);

                switch (name) {
                case "TitleBlock.Number":
                    info.label = 'Item Number';
                    html += $.nano(template_meta, info);
                    break;
                case "TitleBlock.Description":
                    info.label = 'Description';
                    html += $.nano(template_meta, info);
                    break;
                case "TitleBlock.DocumentType":
                    info.label = 'Item Type';
                    html += $.nano(template_meta, info);
                    break;
                case "TitleBlock.rev":
                    info.label = 'Item Rev';
                    html += $.nano(template_meta, info);
                    break;
                case "TitleBlock.Category":
                    info.label = 'Category';
                    html += $.nano(template_meta, info);
                    break;
                case "TitleBlock.ProductLine":
                    info.label = "Product Line";
                    html += $.nano(template_meta, info);
                    break;
                case "TitleBlock.RevReleaseDate":
                    info.label = 'Modified Date';
                    html += $.nano(template_meta, info);
                    break;
                case "TitleBlock.RevIncorpDate":
                    info.label = 'Incorporated Date';
                    html += $.nano(template_meta, info);
                    break;
                }
        });

        $('#popup-meta').removeClass('waiting');
        $('#popup-meta .popup-content').html(html);
    };

    var on_get_metadata_error = function(XMLHttpRequest, text_status, error) {
        //log('on_get_metadata_error: ' + text_status);
        alert("error");
        $('#popup-meta').removeClass('waiting');
        $('#popup-meta .popup-content').html('<span class="data-error">Unable to get meta data.</span>');
    };




</script>

Это CSS.

/ ------------------ POPUPS ------------------------ / 

#popover-mask {
  position:absolute;
  z-index:999;
  background-color:#FFF;
  display:none;
  top: 0;
  left: 0;
  cursor: pointer;
}

.popover {
    position:absolute;
    z-index:1000;
    color: #2a2a2a;
    top: 0;
    left: 0;
    display: none;
}

.popover .content, .popover .t, .popover .b, .popover .b div {
    background:transparent url('../kit/light/images/popover.png') no-repeat top right;
}

.popover .content {
    position:relative;
    zoom:1;
    _overflow-y:hidden;
    padding:32px 16px 0 0;
}

.popover .t {
    position:absolute;
    left:0;
    top:0;
    width:16px;
    margin-left:-16px;
    height:100%;
    _height:1600px;
    background-position:top left;
}

.popover .b {
    position:relative;
    width:100%;
}

.popover .b,.popover .b div {
    height:16px;
    font-size:1px;
}

.popover .b {
    background-position:bottom right;
}

.popover .b div {
    position:relative;
    width:16px;
    margin-left:-16px;
    background-position:bottom left;
}

.search-results .show-more-info.active,.search-results .show-actions.active,.search-results .show-user.active { filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#53b5e7',endColorStr='#43a2d2'); }

/* CLEAR FIX*/
.clearfix:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

.clearfix {
    display:inline-block;
}



/* Hides from IE-mac \*/
* html .clearfix {
    height:1%;
}

.clearfix {
    display:block;
}

Любая помощь будет оценена .. !!

1 Ответ

1 голос
/ 16 июня 2011

Вы пытались обернуть свой код JavaScript с помощью $ (function () {...}); так что он загружается только когда DOM готов?

...