1

だから私はウェブサイトを作ろうとしていて、何かをクリックした後にポップアップウィンドウ/ボックスが表示されるようにしています。このポップアップ ウィンドウには、テキスト/コンテンツが含まれています。私の Web サイトのデザインに従って、「場所」と名付けましょう。この Locations Popup ボックスの高さと幅は固定されているため、下にスクロールしてテキストを読むために作成した垂直スクロール バーがあります。このポップアップにさらにコンテンツを追加したいのですが、残念ながらテキストが途切れており、スクロールが下にスクロールし続けません。より具体的には、追加する余分なテキストに対応するために、垂直スクロールのサイズが変更/縮小されるように、何かを追加または変更するにはどうすればよいですか? 現在、テキストはウィンドウ内で切り取られており、下にスクロールして読むことができません。私の理解では、垂直スクロールバー統合の正しいアプリケーションでは、最後まですべてのテキストをスクロールして読むことができるように、スクロール バー自体のサイズを変更する必要があります。これに他のコード スニペットが必要かどうかをお知らせください。以下はそのための 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