Question

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

<!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>

我无法弄清楚为什么它无法正常显示。有没有人有想法？

非常感谢！

Answer 1

我不确定那个api colorbox但我会选择jQuery ui模式并从那里自定义外观。在下面运行此代码。注意：我添加了对jQuery ui css和代码库的引用。然后我在主体中添加一个新的div，其中包含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>

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

1 个答案: