Question

我正在制作这个网页应用，其中页面的内容非常大（这是一张地图，所以应该是）当放大地图上的东西变得清晰时，就像使用谷歌地图等时一样。我的地图我可点击，并弹出一个包含有关该地方信息的模态，我遇到的问题是模态也缩小以适应包含大地图的外部div。

地图超出缩放时的手机屏幕不是问题，这就是它的全部要点。但问题是出现的模态非常大，所以人们需要在每次想要查看模态时缩小，然后放大地图以找到他们正在寻找的位置。

有没有办法强制将模态调整到屏幕大小而不是外部div？

一些细节：我正在使用angular.js作为我的webapp，模态是来自ui-bootstrap的uibmodal。

地图是角度视图内的div，div设置为100％宽度，高度强制为宽度* 1.45，这是地图的比率格式。（这是通过一个角度指令完成的，它可以监听屏幕调整大小事件，因此可以将高度流畅地设置为正确的数量。

如果我不能自我解释，请访问http://146.185.173.50/ca3/#/home的现场演示 - 您将看到在PC浏览器上无法进行缩放，但如果您使用手机访问该应用，请放大并点击一个地方很容易注意到模态大小的问题。

这个问题很难谷歌：o有什么建议吗？

这是从html页面激活模式的方式：

<span ng-click="showDialog(shop)" class="shop">{{shop.name}}</span>

这是从角度内部启动的方式：

.controller('ShopCtrl', function ($scope, $location, $uibModal, ShopService, selectedShopFac) {
        $scope.shops = [];
        $scope.selectedShop = selectedShopFac.setSelectedShop({});
        ShopService.getShops().then(
                function (response) {
                    $scope.shops = response.data;
                },
                function (response) {
                    console.log(response.data.toString());
                });
        $scope.showDialog = function (shop) {
            $scope.selectedShop = selectedShopFac.setSelectedShop(shop);
            $uibModal.open({
                templateUrl: 'app/home/shop/shop.html',
                scope: $scope
            });
        };
    })

这是管理“地图”（商店的父div）大小的指令：

.directive('mapDir', function ($window) {
        return {
            restrict: 'A',
            link: function (scope, element) {

                var mapDiv = element;

                angular.element(document).ready(function () {
                    mapDiv.height(mapDiv.width() * 1.45);

                });

                function onResize() {
                    mapDiv.height(mapDiv.width() * 1.45);
                }

                onResize();
                angular.element($window).on('resize', onResize);
            }
        };

    })

放大时强制模式不超过手机屏幕？

0 个答案: