javascriptのポップアップサイズが動的に増加しない

Question

透明なポップアップをテキストボックスで作成しましたが、透明なウィンドウは固定サイズです。私は透明なpopUpのサイズを増やしたいと思います。使用 http://www.pat-burt.com/csspopup.js

スタイルは次のとおりです：私はこのスクリプトを使用している

#blanket { 
    background-color:#111; 
    opacity: 0.65; 
    filter:alpha(opacity=65); 
    position:absolute; 
    z-index: 9001; 
    top:0px; 
    left:0px; 
    width:100%; 
} 
#popUpDiv { 
    position:absolute; 
    background-color:#eeeeee; 
    width:300px;   
    height:300px; 
    z-index: 9002; 
} 

私は（オンロード用にこのスクリプトを使用しています）イベント

助け、いくつかのアドバイスや参照を提供してください。全て

Answer 1

に

おかげでは、スクリプトは、百分率又は単により大きい固定値で、動的popupDivサイズを可能にするために再書き込みする必要があります。問題を引き起こして

行は以下のとおりです。私の改訂版のスクリプトで

24 popUpDiv_height=blanket_height/2-150;//150 is half popup's height 

と

43  window_width=window_width/2-150;//150 is half popup's width 

私が言ったの行を変更：

23  var popUpDiv = document.getElementById(popUpDivVar); 
24  
25  // We have to take popup div's height dynamically 
26  var revertHidden = false 
27  if (popUpDiv.style.display == "none") { 
28   // Since it's hidden, show it first 
29   popUpDiv.style.display = "block"; 
30   revertHidden = true 
31  } 
32  popUpDiv_height=blanket_height/2 - popUpDiv.offsetHeight/2 
33  if (revertHidden) { 
34   // We have to hide it again 
35   popUpDiv.style.display = "none" 
36  } 

と

56  // Here we also need popup div's width dynamically 
57  var revertHidden = false 
58  if (popUpDiv.style.display == "none") { 
59   // Since it's hidden, let's show it 
60   popUpDiv.style.display = "block"; 
61   // store that it we have to revert to hidden 
62   revertHidden = true; 
63  } 
64 
65  // here we use offsetWidth 
66  window_width=window_width/2- popUpDiv.offsetWidth/2 
67  // if it was originally hidden, hide it again 
68  if (revertHidden) { 
69   popUpDiv.style.display = "none"; 
70  } 

element.offsetHeightとelement.offsetWidthを使用すると、要素の高さと幅をそれぞれ取得できます。要素は、高さと幅を持つために表示する必要があります。そのため、表示されていない場合は最初に表示し、必要な測定を行い、すぐに再度非表示にする必要があります。ユーザーが気付かないほど速く発生します。

あなたがいることをしたら、その後、CSSは、（例えば）になることができます：

#popUpDiv { 
    position:absolute; 
    background-color:#eeeeee; 
    /* Notice we're using a percentage for the height and width */ 
    width:50%; 
    height:50%; 
    z-index: 9002; 
} 

EDIT：私はアカウントのウィンドウのサイズ変更に取るために、コードを更新しました。 popUpが表示されている間にウィンドウのサイズが変更されたときに呼び出されるwindow_resizeという関数を追加しました。また、既存のonresizeコールバックを上書きして保存し、window_resize関数を実行した後にコールし、ポップアップが表示されなくなったときに復元することにしました。

function popup(windowname) { 
    blanket_size(windowname); 
    window_pos(windowname); 
    toggle('blanket'); 
    toggle(windowname); 

    // Store any previous callback (let's play nice) 
    if (window.onresize && window.onresize != window_resize) { 
     window_resize.previousCallback = window.onresize; 
    } 
    // decide if we're going to set window_resize or restore a previousCallback 
    var toggledCallback = window.onresize != window_resize ? window_resize : window_resize.previousCallback 
    // Set the onresize handler 
    window.onresize = toggledCallback 
    // set the name of the popupDiv so we can access it from window_resize 
    window_resize.popupDiv = windowname; 
} 

// This wiil handle our resize event 
var resizeTimeoutId; 
function window_resize(event) { 
    window.clearTimeout(resizeTimeoutId); 
    resizeTimeoutId = window.setTimeout(function() { 
     // resize the blanket 
     blanket_size(window_resize.popupDiv); 
     // reposition the popup 
     window_pos(window_resize.popupDiv); 
     // Call the previous onresize callback (if there is one); 
     if (window_resize.previousCallback) window_resize.previousCallback.call(window, event); 
    }, 10) 
} 

http://so.savantcoding.com/csspopup/の例も更新しました。再びjavascriptが表示されますhttp://so.savantcoding.com/csspopup/csspopup.js