弹出的图像通过滚动条显示在放大的弹出窗口中

Question

我正在使用放大弹出窗口显示带有iframe的画廊的图像。弹出窗口有效，但图像会通过滚动条显示。

我曾尝试将类设置宽度添加为100％，但没有用。

<script id="rendered-js">
    $('.modal').magnificPopup({
        type: 'iframe',


        gallery: {
            enabled: true, 

            preload: [0, 1], 

            navigateByImgClick: true,

            arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"></button>', // markup of an arrow button

            tPrev: 'Previous (Left arrow key)', 
            tNext: 'Next (Right arrow key)', 
            tCounter: '<span class="mfp-counter">%curr% of %total%</span>' 
        },

        iframe: {
            markup: '<div class="mfp-iframe-scaler">' +
                '<div class="mfp-close"></div>' +
                '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>' +
                '<div class="mfp-title">Some caption</div>' +
                '</div>'

        },

        callbacks: {
            markupParse: function (template, values, item) {
                values.title = item.el.attr('title');
            }
        }
    });
    //# sourceURL=pen.js
</script>`

没有错误消息，只有显示每个图像的滚动条。

Answer 1

要隐藏此垂直滚动条（以及水平滚动条（如果也出现的话），您需要使用CSS overflow属性，其值为hidden。

.modal {
    overflow:hidden;
}