Question

所以我使用的是imgViewer2 plugin。我需要设计一个模式，其中包含放大和缩小所选图像的选项。我遇到了放大缩小选项的问题，该选项与图像一起出现在网页上，而不是出现在模态窗口内。

以下是同一link的工作链接。

Answer 1

在模式弹出窗口中，出现了放大/缩小，但由于z-值较低，因此无法看到索引值，请尝试如下进行修复。

 <style> 
.CustomStyleForImageViewer{
        z-index:1100 !important;
        background:transparent !important;
    }
</style>
$(document).ready(function () {
        $('.full-image').imgViewer2({});
        $('.viewport').addClass("CustomStyleForImageViewer");
        $('.map-image').click(function () {
            var $src = $(this).attr('src');
            $('.full-image').attr('src', $src);
            $('.map-image').removeClass('focused-on');
            $(this).addClass('focused-on');
        });
    });

但这会导致进一步的问题，也需要解决。这个答案只是关于如何使放大/缩小div在模式弹出窗口上可见的提示，您将需要解决在这种情况下会发生的其他问题，对其进行测试，然后您就会知道

Answer 2

你可以在模态中嵌入你自己的缩放按钮。我稍微修改了你的代码。这只是一个如何解决问题的提示。

 <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">

            <div class="image-section-main">
                <div class="full-image-wrapper">
                    <div class="row">
                        <div class="col-md-2">
                               <input type="button" title="ZoomIn" value="ZoomIn" onclick="funcZoomIn()" style="position:absolute; top:50%;" />
                        </div>
                          <div class="col-md-8">
                               <img class="full-image" src="https://s15.postimg.cc/l1wcg52or/house1.png">
                        </div>
                          <div class="col-md-2">
                                <input type="button" title="ZoomOut" value="ZoomOut" onclick="funcZoomOut()" style="position:absolute; top:50%;" />
                        </div>
                    </div>

                </div>
                <ul class="main-image-list">
                    <li class="image-and-text">
                        <img id="img1" class="map-image focused-on" src="https://s15.postimg.cc/l1wcg52or/house1.png">
                        <div class="map-text">Ground Floor</div>
                    </li>
                    <li class="image-and-text">
                        <img class="map-image" src="https://s15.postimg.cc/pnsgohvxn/house2.jpg">
                        <div class="map-text">First Floor</div>
                    </li>
                </ul>
            </div>
            <div class="details-main">
            </div>

        </div>
    </div>
</div>

 <script>

    var Zoom = 1;

    $(document).ready(function () {

        $('.map-image').click(function () {



            var $src = $(this).attr('src');

            $('.full-image').attr('src', $src);

            $('.map-image').removeClass('focused-on');

            $(this).addClass('focused-on');

            $('.full-image').imgViewer2({

                zoomable: true,

                dragable: true

            });

        });

    });


    function funcZoomIn() {

        Zoom = Zoom + 0.1;

        $(".image-section-main").css('-transform', 'scale(' + Zoom + ')');

    }

    function funcZoomOut() {

        Zoom = Zoom - 0.1;

        $(".image-section-main").css('-transform', 'scale(' + Zoom + ')');

    }
</script>

在jquery问题中放大缩放功能的模态

2 个答案: