gpt4 book ai didi

javascript - 弹出窗口不适用于谷歌地图

转载 作者:太空宇宙 更新时间:2023-11-03 18:20:54 25 4
gpt4 key购买 nike

我有一个脚本,每次加载页面时都会打开一个弹出窗口。脚本是:

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8 />

<title>ColorBox demo</title>

<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />

</head>

<body>

<h1>Hello, there!</h1>

<h2>This is some content</h2>

<p>The popup will open in five seconds</p>

<div class="test">

<p>testtest</p>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>

<script>

function openColorBox(){

$.colorbox({iframe:true, width:"60%", height:"60%", href: "http://www.sitepoint.com"});

}

setTimeout(openColorBox,0);

</script>

</body>

</html>

它工作正常,但如果我将它与谷歌地图一起使用,弹出窗口会意外调整大小并且弹出窗口周围的背景颜色会消失。代码是:

<!DOCTYPE html>
<html>
<html lang="ro">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
</script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100%; width: 100%; }



</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7_q4j3wbRGmQr3V-wtKZrlv7Uz_-G7Dk&sensor=true">
</script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng( 44.4325, 26.1039),
zoom: 12

};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);

flightPath.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);


</script>
<body>
<div id="map-canvas">

</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>
function openColorBox(){

$.colorbox({iframe:true, width:"30%", height:"30%", href: "http://www.sitepoint.com"});



}



setTimeout(openColorBox,0);
</script>


</body>

</html>

我不明白为什么它不能正常显示。有人有想法吗?

非常感谢!

最佳答案

我不确定该 api 颜色框,但我会使用 jQuery ui 模式并从那里自定义外观。在下面运行这段代码。注意:我添加了对 jQuery ui css 和代码库的引用。然后我将一个新的 div 附加到 body 中,其中包含一个 iframe,然后对该元素调用 dialog 方法。希望这会有所帮助。

<!DOCTYPE html>
<html>
<html lang="ro">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7_q4j3wbRGmQr3V-wtKZrlv7Uz_-G7Dk&sensor=true"></script>

<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100%; width: 100%; }
</style>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng( 44.4325, 26.1039),
zoom: 12

};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);

}

google.maps.event.addDomListener(window, 'load', initialize);


</script>
<body>
<div id="map-canvas">

</div>

<script>
function openColorBox(){

$('body').append("<div id='modalBox'><iframe style='height:300px; width:350px;' src='http://www.sitepoint.com'></iframe></div>");
$('#modalBox').dialog({
height:400,
width: 400
});


}

setTimeout(openColorBox,0);
</script>


</body>

</html>

关于javascript - 弹出窗口不适用于谷歌地图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21866065/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com