Когда вы добавляете тег <html> на свою страницу, это сбивает с толку браузер и, скорее всего, является проблемой. Я бы посоветовал сделать то, что сказал Пойнти, и использовать window.open(), чтобы создать всплывающее окно (см. этот урок) , или, что еще лучше, попробовать один из многих плагинов для jQuery light box .
Я не уверен, что вы делаете с картами Google, поэтому я решил просто привести для вас базовый пример. С помощью этого сценария, если вы нажмете на изображение внутри #image div, откроется всплывающее окно того же размера, что и изображение.
$(document).ready(function(){
$('#images img').click(function(){
var padding = 20;
var w = $(this).width() + padding;
var h = $(this).height() + padding;
var popup = '\
<html>\
<head>\
<link type="text/css" href="popup-style.css" rel="stylesheet" />\
<scr'+'ipt type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></scr'+'ipt>\
</head>\
<body>\
<img src="' + $(this).attr('src') + '">\
</body>\
</html>';
var pop = window.open('','Image View','toolbar=0,location=0,status=0,width=' + w + ',height=' + h + ',scrollbars=1,resizable=1');
pop.document.write(popup);
pop.document.close();
})
});
ПРИМЕЧАНИЕ. При добавлении тега script в строку обязательно разбивайте слово «script», иначе вы получите ошибку.
Обновление № 2:
Хорошо, так как вы хотите работать с тем, что у вас есть, попробуйте сделать это:
Удалите тег <html> из окна вашего кампуса, затем расположите окно вашего кампуса с помощью CSS и / или javascript. Добавить что-то вроде:
var w = $(window).width();
var h = $(window).height();
// Add overlay and make clickable to hide popup
// you can remove the background color and opacity if you want to make it invisible
var $overlay = $('<div/>', {
'id': 'overlay',
css: {
position : 'absolute',
height : h + 'px',
width : w + 'px',
left : 0,
top : 0,
background : '#000',
opacity : 0.5,
zIndex : 99
}
}).appendTo('body');
// Position your popup window in the viewport
$('#CampWindow').css({
position: 'absolute',
top : $(window).scrollTop() + 50 + 'px',
left : w/2 - $('#CampWindow').width()/2 + 'px', // centers the popup
zIndex : 100
})
.fadeIn('slow');
// Click overlay to hide popup
$('#overlay').click(function(){
$('#CampWindow').hide();
$(this).remove(); // remove the overlay
})