Colorbox moves html body a little bit
I'm using Colorbox to show some messages on my website. When I launch the colorbox, using the code below, the body of my parent page is moving a little bit to the richt and bottom (see picture).
Code to launch Colorbox:
$(".weather a").colorbox开发者_开发知识库({href: "page.html"});
Picture: http://www.imgdumper.nl/uploads2/4b4b3ffd2abcf/4b4b3ffd26d54-screenshot.jpg
The picture above is a peace of the whole page (taken at the upper left corner of the page). When you looked carefully, you see a big white border arround the blue background. When I close the colorbox the body resets himself right (most of the time).
Does anyone know how to solve this annoying problem?
You might have this problem if you're trying to embed a whole html page (including <html>, <head> and other tags) within the modal.
Set iframe: true and make sure you're using an include in order to avoid this problem.
Here a part of the code (the whole code is too large):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>sad</title>
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link type="text/css" href="css/custom-theme/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<link type="text/css" href="css/colorbox.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="js/color.js"></script>
<script type="text/javascript" src="js/timers.js"></script>
<script type="text/javascript" src="js/colorbox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
jQuery.fn.getWeather = function(cityW,countryW) {
$("#weather").hide();
$("#loadWeather").show();
$.ajax({
type: "POST",
url: "inc/weather.php",
data: ({city : cityW, country : countryW}),
success: function(msg){
$("#weather").html(msg);
$("#weather").show();
$("#loadWeather").hide();
$("#weather a").colorbox({
href:"countries.php"
});
}
});
}
});
</script>
And some css:
* { padding: 0; margin: 0; border: 0; }
a { outline: none; cursor: pointer; cursor: hand; }
ul {
list-style: none;
}
html,body {
height: 100%;
margin: 0;
padding: 0;
}
body {
text-align: center;
margin: 0;
padding: 0;
height: 100%;
background-color: #ffffff;
font-family: Trebuchet MS, Verdana, Tahoma;
font-size: 12px;
text-align: center;
}
Sorry for the format of the code (I don't know exactly how it works here).
加载中,请稍侯......
精彩评论