0

このコードを機能させることができないようです：

http://jsfiddle.net/fxBEg/13/

私がやろうとしているのは、「フッター」という名前のDIV領域に...オーバーレイをオーバーレイすることですが、それはまったく行われていないようです。

JSコード：

$('#enableOverlay').live('click',function(event){
    var $overlay = $('<div id="overlay"><div id="overlayText"><img src="/img/sendingData.gif"><p class="overlaytxt1">Your data is being saved</p><p class="overlaytxt2">Please wait...</p></div></div>').prependTo('#footer');
    var $footer = $('#footer');
    var $enable = $('#enableOverlay');

    $enable.addClass('active');
    $overlay.fadeIn();
});

HTMLコード：

<link type="text/css" rel="stylesheet" href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700'>

<p>Curabitur vel nulla ac justo pharetra aliquet. Phasellus dictum porttitor metus, ut mattis eros sagittis sit amet. Aliquam bibendum velit vitae nisi porttitor sollicitudin. Proin pretium sapien eu lorem tempus convallis. In tincidunt erat quis neque dapibus id lobortis mauris placerat. Aliquam tellus sem, consequat ac faucibus ac, rhoncus eu nunc. Nulla pulvinar malesuada viverra.</p><p>In atat turpis mi, ac luctus quam. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer ac eros felis. In ac eros elit, vitae faucibus nibh. Pellentesque eget ipsum in metus vulputate consequat. Nam odio neque, ullamcorper quis molestie a, eleifend sed diam. Nam tellus ante, venenatis et sodales non, ultrices vel neque. Pellentesque vehicula vulputate condimentum. Integer non leo elit, eget cursus a.at turpis mi, ac luctus quam. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer ac eros felis. In ac eros elit, vitae faucibus nibh. Pellentesque eget ipsum in metus vulputate consequat. Nam odio neque, ullamcorper quis molestie a, eleifend sed diam. Nam tellus ante, venenatis et sodales non, ultrices vel neque. Pellentesque vehicula vulputate condimentum. Integer non leo elit, eget cursus  Cat turpis mi, ac luctus quam. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer ac eros felis. In ac eros elit, vitae faucibus nibh. Pellentesque eget ipsum in metus vulputate consequat. Nam odio neque, ullamcorper quis molestie a, eleifend sed diam. Nam tellus ante, venenatis et sodales non, ultrices vel neque. Pellentesque vehicula vulputate condimentum. Integer non leo elit, eget cursus atat turpis mi, ac luctus quam. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer ac eros felis. In ac eros elit, vitae faucibus nibh. Pellentesque eget ipsum in metus vulputate consequat. Nam odio neque, ullamcorper quis molestie a, eleifend sed diam. Nam tellus ante, venenatis et sodales non, ultrices vel neque. Pellentesque vehicula vulputate condimentum. Integer non leo elit, eget cursus  tat turpis mi, ac luctus quam. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer ac eros felis. In ac eros elit, vitae faucibus nibh. Pellentesque eget ipsum in metus vulputate consequat. Nam odio neque, ullamcorper quis molestie a, eleifend sed diam. Nam tellus ante, venenatis et sodales non, ultrices vel neque. Pellentesque vehicula vulputate condimentum. Integer non leo elit, eget cursus urat turpis mi, ac luctus quam. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer ac eros felis. In ac eros elit, vitae faucibus nibh. Pellentesque eget ipsum in metus vulputate consequat. Nam odio neque, ullamcorper quis molestie a, eleifend sed diam. Nam tellus ante, venenatis et sodales non, ultrices vel neque. Pellentesque vehicula vulputate condimentum. Integer non leo elit, eget cursus piat turpis mi, ac luctus quam. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer ac eros felis. In ac eros elit, vitae faucibus nibh. Pellentesque eget ipsum in metus vulputate consequat. Nam odio neque, ullamcorper quis molestie a, eleifend sed diam. Nam tellus ante, venenatis et sodales non, ultrices vel neque. Pellentesque vehicula vulputate condimentum. Integer non leo elit, eget cursus s at turpis mi, ac luctus quam. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer ac eros felis. In ac eros elit, vitae faucibus nibh. Pellentesque eget ipsum in metus vulputate consequat. Nam odio neque, ullamcorper quis molestie a, eleifend sed diam. Nam tellus ante, venenatis et sodales non, ultrices vel neque. Pellentesque vehicula vulputate condimentum. Integer non leo elit, eget cursus mi, ac luctus quam. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Integer ac eros felis. In ac eros elit, vitae faucibus nibh. Pellentesque eget ipsum in metus vulputate consequat. Nam odio neque, ullamcorper quis molestie a, eleifend sed diam. Nam tellus ante, venenatis et sodales non, ultrices vel neque. Pellentesque vehicula vulputate condimentum. Integer non leo elit, eget cursus um sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur semper, neque ac placerat suscipit, dolor justo vulputate purus, at tristique sem nisl nec orci.</p>

<div id="footer" style="width: 150px; height: 250px;">
    <a id="enableOverlay" style="color: #39F;">CLICK TO Overlay</a>
    This is a normally placed footer somewhere in your html
    gdf
    gsdfgsdfg
    fgs
    dgf
    dgf
</div>

そしてCSS：

#overlay {
display: none;
position: absolute;
top: 0;
height: 100%;
width: 100%;
background: white;
opacity: 0.9;
z-index: 20000;
}

#overlayText {
    text-align:center;
    padding-top: 150px;
    z-index:8001;
}

p.overlaytxt1 {
    line-height:70%;
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 1.5em;
    line-height: 1.4;
    font-weight: bold;
    top: 5px;
    position:relative;
    color: #fff;
    background-color: #47c3d3;
    width: 240px;
    margin-left: 43%;
}

p.overlaytxt2 {
    line-height:70%;
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 1.5em;
    line-height: 1.4;
    font-weight: bold;
    color: #fff;
    position:relative;
    background-color: #47c3d3;
    width: 140px;
    margin-left: 51%;
    top: -22px;
}

</ p>

何が問題なのですか？

4

2 に答える 2

1

絶対的に配置された要素は、最も近い位置に配置された親要素（この場合はドキュメント）を基準にして配置されます。

問題を解決するには、フッター要素を配置する必要があります。これにより、#overlayの左上隅を参照してください。top:0left:0#footer

#footer{
    position:relative;
}

これをフィドルに追加したので、実際の動作を確認できます。

于 2012-10-25T20:53:29.780 に答える
1

最後の質問とこの質問からいくつかのコードを取得すると、このフィドルが得られます。サイズを設定し、今回はオーバーレイの位置もプレーンjsで設定します。これには新しい関数が必要です。

function findPos(obj) {
    var curleft = curtop = 0;
    if(obj.offsetParent){
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    return [curleft,curtop];
}

フッターがどこにあるかを把握するために使用します。フィドルは短く、おそらく自明です。コメントで投稿しない場合は、詳細をお知らせします。

注：この方法で行うと、フッターをどのように配置および/またはサイズ設定しても、オーバーレイがそれに追従します。また、これはすべての主要なブラウザで正しく機能します。

編集：

コメントで求めたように、jsからそれを追加するフィドルがあります。

于 2012-10-25T21:26:41.787 に答える