Fatal编程技术网

Twitter bootstrap 3 引导模式外部URL谷歌地图

twitter-bootstrap-3

Twitter bootstrap 3 引导模式外部URL谷歌地图,twitter-bootstrap-3,modal-dialog,Twitter Bootstrap 3,Modal Dialog,我有一个搜索谷歌html页面，打开谷歌地图。我想点击一个按钮将这个html文件加载到一个模式对话框中 在我的主index.jsp页面上定义了一个模式，并在SearchGoogle.html中href。内容没有加载。有什么帮助吗？ 下面的页面是我要在模式对话框中加载的远程页面。我已尝试远程内容加载。它不工作 <!DOCTYPE html> <html> <head> <title>Search Map</title> <meta n

我有一个搜索谷歌html页面，打开谷歌地图。我想点击一个按钮将这个html文件加载到一个模式对话框中

在我的主index.jsp页面上定义了一个模式，并在SearchGoogle.html中href。内容没有加载。有什么帮助吗？ 下面的页面是我要在模式对话框中加载的远程页面。我已尝试远程内容加载。它不工作

<!DOCTYPE html>
<html>
<head>
<title>Search Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/googleMap.css" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script src="script/googleMap.js"></script>
</head>
<body>
<input id="pac-input" class="controls" type="text"
    placeholder="Enter a location">
<div id="type-selector" class="controls">
    <input type="radio" name="type" id="changetype-all" checked="checked">
    <label for="changetype-all">All</label> <input type="radio"
        name="type" id="changetype-establishment"> <label
        for="changetype-establishment">Establishments</label> <input
        type="radio" name="type" id="changetype-geocode"> <label
        for="changetype-geocode">Geocodes</label>
</div>
<div id="map-canvas"></div>


搜索地图
所有机构的地理编码

如果您查找，则说明load方法使用innerHTML解析要加载的页面，并且：

在此过程中，浏览器通常会过滤文档中的元素，例如
，
或
元素

我建议将
googleMap.css
放在模式页面上，并将上面页面中的脚本移动到body标签上，如下所示：

HTML，用于加载页面（我称之为remote.HTML）：

<!DOCTYPE html>
<html>
<head>
<title>Search Map</title>
</head>
<body>
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title">Google Map Modal Title</h4>
  </div>
  <div class="modal-body">
    <input id="pac-input" class="controls" type="text" placeholder="Enter a location">
    <div id="type-selector" class="controls">
      <input type="radio" name="type" id="changetype-all" checked="checked">
      <label for="changetype-all">All</label> <input type="radio"
        name="type" id="changetype-establishment"> <label
        for="changetype-establishment">Establishments</label> <input
        type="radio" name="type" id="changetype-geocode"> <label
        for="changetype-geocode">Geocodes</label>
    </div>
    <div id="map-canvas"></div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script src="script/googleMap.js"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <!-- Add the googleMap.css on this page -->
    <link rel="stylesheet" type="text/css" href="css/googleMap.css">

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <!-- The contents of remote.html will be injected here.  Don't forget to wrap your content in the modal-header, modal-body, and modal-footer classes! -->  
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>


搜索地图
&时代；接近
谷歌地图模式标题
所有机构的地理编码
接近
HTML，用于具有以下模式的页面：

<!DOCTYPE html>
<html>
<head>
<title>Search Map</title>
</head>
<body>
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title">Google Map Modal Title</h4>
  </div>
  <div class="modal-body">
    <input id="pac-input" class="controls" type="text" placeholder="Enter a location">
    <div id="type-selector" class="controls">
      <input type="radio" name="type" id="changetype-all" checked="checked">
      <label for="changetype-all">All</label> <input type="radio"
        name="type" id="changetype-establishment"> <label
        for="changetype-establishment">Establishments</label> <input
        type="radio" name="type" id="changetype-geocode"> <label
        for="changetype-geocode">Geocodes</label>
    </div>
    <div id="map-canvas"></div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script src="script/googleMap.js"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <!-- Add the googleMap.css on this page -->
    <link rel="stylesheet" type="text/css" href="css/googleMap.css">

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <!-- The contents of remote.html will be injected here.  Don't forget to wrap your content in the modal-header, modal-body, and modal-footer classes! -->  
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>


引导101模板
请显示您的标记。您是否使用远程方法加载模式内容？请阅读：选项副标题下，有一个表解释了remote选项，并描述了从单独的html页面加载内容的正确方式。请查找已编辑的代码。这是我要在模式对话框中加载的remote.html。基本上是google map html。该页面没有在ModalYep中加载。这就成功了。我至少在模式中加载了它，但地图确实加载了似乎根本没有加载。（只有文本框和收音机加载）。这可能是调整大小的问题？你能让地图自己加载吗？我的意思是直接加载页面？是的。我可以运行地图而没有任何问题。在这里发布JS。