无法使用jQuery在“更多信息”链接上打开弹出图像
我想在“更多信息”链接上打开一个图像的弹出窗口,但我没有得到任何关于该链接的弹出图像。。这是更多信息链接的代码无法使用jQuery在“更多信息”链接上打开弹出图像,jquery,jquery-ui,jquery-plugins,Jquery,Jquery Ui,Jquery Plugins,我想在“更多信息”链接上打开一个图像的弹出窗口,但我没有得到任何关于该链接的弹出图像。。这是更多信息链接的代码 <a href="#?w=700" rel="popup2" class="poplight"> <div class="meta"> <div class="show-more-inf
<a href="#?w=700" rel="popup2" class="poplight">
<div class="meta">
<div class="show-more-info">+ More Info</div>
</div>
</a>
任何帮助都将不胜感激 您是否尝试过用$(function(){…})包装javascript代码;因此,它只能在DOM准备就绪时加载?感谢您提供的信息,现在通过添加它,它可以正常工作。。但是如果我想通过点击页面上的任意位置来删除弹出窗口。。那么这个窗口就不会被移除。它会留在页面上。。。知道为什么会发生这种情况吗?试着把
声明
(即var\uuuuuuuuuuu=”“
,或function\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu(){}
)放在$(function(){……})之外代码>但保留所有内容,如$('.show more info').live('click',function(e){……})代码>在$(函数(){…})的内部更具体地说,我认为如果你在函数(e){…}上加上var代码>在$(函数(){…})之外代码>则该特定函数应该可以工作
<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…</div></div></div><div id="popup-revisions"><h4>Revision Info</h4><div class="popup-content"><div class="waiting">Getting revisions info…</div></div></div><div id="popup-where"><h4>Where Used Info</h4><div class="popup-content"><div class="waiting">Getting where used info…</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>
#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;
}