0

所以我正在尝试制作一个网站并在单击某些内容后出现一个弹出窗口/框 DIV。此弹出 DIV 包含文本/内容，我们根据我的网站设计将其命名为“位置”。此 Locations Popup DIV 具有固定的高度和宽度，因此，我创建了一个垂直滚动条来向下滚动并阅读文本。我想在此弹出窗口中添加更多内容，但不幸的是，文本被截断，并且滚动不会继续向下滚动。我为 DIV 中的边距/填充设置了一个相当大的值，以使其适用于很长的页面长度，但它的效率非常低且编程很差。

如何使用 JavaScript 或 CSS 将 div 的样式设置为整个 HTML 文档的高度（这里是动态的、变化的因素），以便我可以智能且正确地做到这一点？我不想手动执行此操作，因为如果我选择 HTML 文档变得越长，我将始终必须返回并更改 CSS 中的边距/填充值或对 JavaScript 执行某些操作。

下面是它的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;
}

#popupAbout p, #popupLocations p, #popupContact p, #popupBlog p {
    padding-left: 10px;
    font-size: 18px;
    line-height: 20px;
}
#popupAbout h1, #popupLocations h1, #popupContact h1, #popupBlog h1 {
    text-align: left;
    font-size: 30px;
    letter-spacing: 1px;
    border-bottom: 1px dotted #D3D3D3;
    padding-bottom: 2px;
    margin-bottom: 20px;
}
#popupAboutClose, #popupLocationsClose, #popupContactClose, #popupBlogClose {
    right: 6px;
    top: 6px;
    position: absolute;
    display: block;
}

以及适当的 JavaScript：

//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
                    }
                );
            });

这是我保存的屏幕截图，以便更好地了解我在说什么（查看弹出窗口的底部，其中文本被截断）：

我的网站截图

到目前为止，每个人都可以在 www.zaheeruddinsyed.com 上查看我的工作，以准确了解我在说什么。

4

1 回答 1

0

我相信你正在寻找overflow: auto财产。看看这个小提琴。

如果您想实现示例图像上的滚动条，则必须使用 css，这里是有关如何将自定义样式应用于滚动条的教程。

顺便说一句，如果你想制作弹出窗口，你可能想看看Fancybox，在我看来，它看起来非常好，大部分工作已经完成！唯一的缺点可能是您必须将它与 jQuery 一起使用，但它已经在今天的大多数网页上使用。

编辑

当我查看页面源代码时，不到一分钟我就发现了问题。弹出 div 的内容没有滚动到底部，它由于某种原因停止了。

这个问题类似：底部内容截止使用溢出：自动；和jscrollpane

尝试将此代码放入 JavaScript 控制台（在Chrome 中，在 Firefox 中）Ctrl：ShiftJK

$("#popupLocations .jspPane").css("top","-800px")

它向下滚动到应有的底部。我知道这还不能解决您的问题，但我想我已经找到了解决方案（我不确定，因为我自己无法测试）。但是，如果您查看其他问题，则解决方案是使用autoReinitialise:true. 您可以通过在 JavaScript 控制台中运行它来立即尝试：

$('.popupLocations').jScrollPane({
                        showArrows: true,
                        horizontalGutter: 10,
                        autoReinitialise:true
                    }
                );

当然，如果您希望它在每次刷新页面时都能正常工作，您必须将它放在您正在初始化 jScrollPane 的文件中。

为什么你的文件中有 2 个$(document).ready(function()...)和 2 个$(function()...（相同的）定义？您应该将所有代码放在一个函数中，该函数将在加载 DOM 时调用。为了你的用户体验，尽量减少图片和文件，也尽量避免使用数百万个不同的 js 插件。第一次加载花了我将近 11 秒（根据网络分析器），而且我有 100Mb/s 的上行链路，我无法想象有移动互联网的人。该网页发出超过 100 个请求，其中很多是 1x1px png。如果所有这些确实是必要的，您可能需要考虑压缩和捆绑。这取决于您将使用什么后端框架。我可以说 ASP.NET MVC 4 提供了非常简单的包管理器，但我确信 PHP 或 rails 提供了类似的东西。

于 2013-08-20T20:37:11.953 回答