0

だから私はウェブサイトを作ろうとしていて、何かをクリックした後に表示されるポップアップウィンドウ/ボックス DIV を持っています。このポップアップ DIV にはテキスト/コンテンツが含まれています。私の Web サイトの設計に従って、「場所」と名付けましょう。この 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 で使用する必要があることかもしれませんが、今日ではほとんどの Web ページで既に使用されています。

編集

ページのソースを見ると、1 分もかからずに問題が見つかりました。ポップアップ div のコンテンツが一番下までスクロールしません。何らかの理由で停止します。

この質問は似ています:オーバーフローを使用したボトム コンテンツ カットオフ: 自動; とjscrollpane

このコードを JavaScript コンソールに入れてみてください ( Ctrl+ Shift+ ( JChrome ではK、Firefox では):

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

一番下までスクロールします。これで問題が解決されないことはわかっていますが、解決策を見つけたと思います (自分でテストできないため、わかりません)。しかし、他の質問を見ると、解決策はautoReinitialise:true. これを JavaScript コンソールで実行すると、すぐに試すことができます。

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

もちろん、ページを更新するたびに正しく動作させたい場合は、jScrollPane を初期化するファイルに配置する必要があります。

$(document).ready(function()...)ファイルに2 つと 2 つ$(function()...の (同じ) 定義があるのはなぜですか? すべてのコードを 1 つの関数に入れる必要があります。この関数は、DOM が読み込まれたときに呼び出されます。また、ユーザー UX のために、画像とファイルを減らし、何百万もの異なる js プラグインを使用しないようにしてください。初めてロードするのに (ネットワーク プロファイラーによると) ほぼ 11 秒かかりました。Web ページは 100 を超えるリクエストを行いますが、その多くは 1x1px の png です。本当に必要な場合は、圧縮とバンドルを検討することをお勧めします。使用するバックエンド フレームワークによって異なります。ASP.NET MVC 4 は非常に単純なバンドル マネージャーを提供すると言えますが、PHP や Rails も同様のものを提供していると確信しています。

于 2013-08-20T20:37:11.953 に答える