1

所以我正在尝试制作一个网站并在单击某些内容后出现一个弹出窗口/框。此弹出窗口包含文本/内容，根据我的网站设计，我们将其命名为“位置”。这个位置弹出框具有固定的高度和宽度，因此，我创建了一个垂直滚动条来向下滚动并阅读文本。我想在此弹出窗口中添加更多内容，但不幸的是，文本被截断，并且滚动不会继续向下滚动。更具体地说，我如何添加或更改某些内容，以便垂直滚动将重新调整大小/缩小自身以适应我添加的额外文本？目前，文本只是在窗口中截断，我无法向下滚动阅读。据我了解，在垂直滚动条集成的正确应用中，滚动条应该重新调整大小，以便可以滚动和阅读直到最后的所有文本。请让我知道是否需要其他代码片段。下面是它的CSS：

/* Pop Up */
#popupAbout, #popupLocations, #popupContact, #popupBlog {
    height: 600px;
    width: 900px;
    overflow: scroll;
    background-color: rgba(0, 0, 0, 0.75);
    border: 2px solid #cecece;
    z-index: 15;
    padding: 20px;
    color: #FFF;
    -webkit-box-shadow: 0px 0px 4px #000 inset;
    -moz-box-shadow: 0px 0px 4px #000 inset;
    box-shadow: 0px 0px 4px #000 inset;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    margin-top: -50px;
    visibility: hidden;
}

为了更轻松地为我提供帮助，我还为其添加了 JS：

//Locations Page Pop Up
            var popupLocationsStatus = 0;

            function loadPopupLocations(){
                if(popupLocationsStatus==0){
                    $("#popupLocations").fadeIn("slow");
                    popupLocationsStatus = 1;
                }
            }

            function disablePopupLocations(){
                if(popupLocationsStatus==1){
                    $("#popupLocations").fadeOut("slow");
                    popupLocationsStatus = 0;
                }
            }

            function centerPopupLocations(){
                var windowWidth = document.documentElement.clientWidth;
                var windowHeight = document.documentElement.clientHeight;
                var popupLocationsHeight = $("#popupLocations").height();
                var popupLocationsWidth = $("#popupLocations").width();
                $("#popupLocations").css({
                    "position": "absolute",
                    "top": windowHeight/2-popupLocationsHeight/2,
                    "left": windowWidth/2-popupLocationsWidth/2
                });
            }


            $(document).ready(function(){
                $("#popupLocations").fadeOut();
                popupLocationsStatus = 0;
                $("#Locations").click(function(){
                $("#popupLocations").css({
                    "visibility": "visible" });
                    disablePopupAbout();
                    disablePopupContact();                  
                    centerPopupLocations();
                    loadPopupLocations();
                });
                $("#popupLocationsClose").click(function(){
                    disablePopupLocations();
                });
            });
            $(function()
            {
                $('#popupLocations').jScrollPane();
                $('.popupLocations').jScrollPane(
                    {
                        showArrows: true,
                        horizontalGutter: 10
                    }
                );
            });
4

0 回答 0