bootstrap模态弹出窗口 [英] bootstrap modal popup

问题描述

我在bootstrap中使用modalpopup，在div中我已经绑定了谷歌地图，第一次显示地图，第二次弹出显示没有地图...你能帮助我吗？ 
 ======== 
 java脚本表设计用户点击动态表行第一列，表id是StatusData用户点击第一列
 
 <   td    宽度  ='  10％' >  <   a    < span class =code-attribute> href   =' ＃GMap' >  <   img     src   =' 。 ./../Images/mmap.png' /   >  <   / a  >  <   / td  >  <   td     class   ='  vid' >  <   a     href   =' ＃VDetails' > + obj.VID +<   / a  >  <   / td  >  
 =========== 
 div弹出设计使用bootstrap 
 
 <   div    < span class =code-attribute> class   =  remodal    id   =  GMap    data-remodal-id   =  GMap >  
 <   div     class   =  contenttitle2 modal_title >  
 <   h3  > ;  Google Map <   / h3  > ;  
 <   / div  >  
 <   div     id   =  port_content >  
 <   div     id   = < span class =code-keyword> mymodal >  
 <   div     id   =  map-canvas   样式  =  width：auto;高度：300px; >  <   / div  >  
 <   / div  >  
 <   / div  >  
 <   / div  >  
 
 ===== 
 jQuery（＃ GMap）。on（open，function（）{
 $（'＃StatusData tbody tr td：nth-​​child（1）'）。click（function（）{
 var $ row = $（this）.closest（tr）; 
 $（＃map-canvas）。empty（）; 
 // alert（$ row.find（。vid）。text （））; 
}）; 
 var map; 
 var latlng = new google.maps.LatLng（5.72144,100.41659）; 
 var icon; 
 var myOptions = {
 zoom：16，
 center：latlng 
}; 
 map = new google.maps.Map（jQuery（'＃map-canvas'）[0]，myOptions）; 
 var marker = new google.maps.Marker（{
 position：latlng，
 map：map，
 icon：icon 
}）; 
 google.maps.event.trigger（map，'resize'）; 
 map.setZoom（map.getZoom（））; 
 
 
 
 var infowindow = null; 
 infowindow = new google.maps.InfoWindow（{
 content：holding ...
}）; 
 
 google.maps.event.addListener（marker，'mouseover'，function（）{
 
 var windowcontent =test; 
 infowindow.setContent（windowcontent） ）; 
 infowindow.open（map，this）; 
}）; 
}）; 
 
 ============== 

解决方案

（'＃StatusData tbody tr td：nth-​​child（1）'）。click（function（）{
var

row =

（这个）.closest（ TR）;

hi, am using modalpopup in bootstrap, in that div i have binded google maps, first time the map is displaying, second time onwards popup displaying without maps.. . can you help me in this.
========
java script table design user clicks dynamic table row column one, table id is StatusData user clicks on first column

<td width='10%'><a href='#GMap'> <img src='../../Images/mmap.png'/></a> </td><td class='vid'> <a href='#VDetails'>"+ obj.VID + " </a> </td>
===========
div pop up design using bootstrap

 <div class="remodal" id="GMap" data-remodal-id="GMap">
    <div class="contenttitle2 modal_title">
        <h3>Google Map</h3>
    </div>
    <div id="port_content">
        <div id="mymodal">
            <div id="map-canvas" style="width: auto; height: 300px;"></div>
        </div>
    </div>
</div>

=====
jQuery("#GMap").on("open", function () {
        $('#StatusData tbody tr td:nth-child(1)').click(function () {
            var $row = $(this).closest("tr");
            $("#map-canvas").empty();
            //        alert($row.find(".vid").text());
        });
        var map;
        var latlng = new google.maps.LatLng(5.72144, 100.41659);
        var icon;
        var myOptions = {
            zoom: 16,
            center: latlng
        };
        map = new google.maps.Map(jQuery('#map-canvas')[0], myOptions);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: icon
        });
        google.maps.event.trigger(map, 'resize');
        map.setZoom(map.getZoom());



        var infowindow = null;
        infowindow = new google.maps.InfoWindow({
            content: "holding..."
        });

        google.maps.event.addListener(marker, 'mouseover', function () {

            var windowcontent = "test";
            infowindow.setContent(windowcontent);
            infowindow.open(map, this);
        });
    });

==============

解决方案

('#StatusData tbody tr td:nth-child(1)').click(function () { var

row =

(this).closest("tr");

这篇关于bootstrap模态弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！