0

jQuery で動作するポップアップがありますが、DIV と同じ場所にレンダリングされています。ポップアップをページの中央にレンダリングしたいと思います。出来ますか？はいの場合、どのように？

私のCSS：

.newpopup {
    display:none;
    border: 1px solid black;
    background-color: #eee;
}

HTML:

 <div class='newpopup'>
</div>
<button>popup</button>

JavaScript:

function popup() {
    alert('test');
    var popup = $('.newpopup');
    popup.draggable();
    popup.resizable();
    popup.html('<p>Where is pancakes house?</p>');
    popup.show('fast');
}
$(document).ready(function(){
  $('button').click(function(){
     popup();
  });
})
4

2 に答える 2

1

Set your popup css position : absolute and use top & left properties to set your popup position.

  .newpopup {
    display:none;
    border: 1px solid black;
    background-color: #eee;
    position:absolute;
    top:50%;
    left:50%;
}

EDIT

I created a fiddle , Jsfiddle it works perfectly here, check it out.

于 2012-06-18T09:41:24.860 に答える
1

画面の幅と高さ、および作成したボックスを取得する必要があります

var screen_width = $(document).width();
var screen_height = $(document).height();
var box_width = popup.width();
var box_height = popup.height();

position:absolute;次に、に設定する必要があります.newpopup。だけでなく、topそれとleft位置

var top = (screen_height - box_height) / 2; // you might like to subtract a little to position it slightly higher than half way
var left = (screen_width - box_width) / 2;
popup.css({ 'position': 'absolute', 'top':top, 'left':left });

コードは圧縮できますが、分割した方が理解しやすいです。

編集: を使用してページの先頭にポップアップ ボックスを追加できます$(body).prepend(popup);。これは、他の要素の影響を受けないことを意味します。

于 2012-06-18T09:53:07.503 に答える