Question

我有一个巨大的弹出插件，可以在弹出窗口中显示地图，但它在移动设备中无法正常工作。如果我点击它重定向到谷歌地图页

这是我的代码

$('.video, .map-link').magnificPopup({
   type: 'iframe',
   mainClass: 'mfp-fade',
   removalDelay: 160,
   preloader: false,
   fixedContentPos: false
});

Answer 1

试试这个，

 $('.video, .map-link').magnificPopup({
     type: 'iframe',
     mainClass: 'mfp-fade',
     removalDelay: 160,
     preloader: false,
     fixedContentPos: false,
     iframe: {
         markup: '<div class="mfp-iframe-scaler">'+
                 '<div class="mfp-close"></div>'+
                 '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                 '</div>', 
         patterns: {
             gmaps: {
                 index: '//maps.google.',
                 src: '%id%&output=embed'
             }
         },
         srcAction: 'iframe_src', 
     }
 });

Answer 2

colares的解决方案对我有用。我还添加了一个媒体查询，因为移动设备上的弹出窗口是一个窄矩形，这使它更宽：

@media screen and (max-width: 875px) {.mfp-container {  
height: 90%;
width: 175%;  
left: -37%; }}

如何使用大胆的弹出窗口在移动设备中显示地图？

2 个答案: