jqueryベースのポップアップ・プロンプト・ボックスは、常にウィンドウの中央にあります(alertポップアップ・ボックスのような効果です).
3401 ワード
原理は簡単です.
ブラウザによってフォームのサイズが異なるため、現在の画面(フォーム)の幅と高さを取得します.これがあれば、垂直中央の座標を計算することができます.しかし、スライドしたスクロールバーはどうして垂直に中央にあるのだろうか.このとき、現在のフォームのページ上部からの高さを取得し、先ほどのy軸座標に加算します.
$(document)はページ全体を取得し、$(window)は現在のフォームを取得していることを明らかにします.
最後に取得した座標をフォームに割り当てると、フォーム自体が絶対的に位置決めされるので、自然にフォームの真ん中に移動できます.
具体的なコード:
ブラウザによってフォームのサイズが異なるため、現在の画面(フォーム)の幅と高さを取得します.これがあれば、垂直中央の座標を計算することができます.しかし、スライドしたスクロールバーはどうして垂直に中央にあるのだろうか.このとき、現在のフォームのページ上部からの高さを取得し、先ほどのy軸座標に加算します.
$(document)はページ全体を取得し、$(window)は現在のフォームを取得していることを明らかにします.
最後に取得した座標をフォームに割り当てると、フォーム自体が絶対的に位置決めされるので、自然にフォームの真ん中に移動できます.
具体的なコード:
<br>$(document).ready(function() {
<br>$('.btn').click(function() {
<br>$('.mask').css({'display': 'block'});
<br>center($('.mess'));
<br>check($(this).parent(), $('.btn1'), $('.btn2'));
<br>});
<br>//
<br>function center(obj) {
<br>var screenWidth = $(window).width(), screenHeight = $(window).height(); //
<br>var scrolltop = $(document).scrollTop();(),//
<br>var objLeft = (screenWidth - obj.width())/2 ;
<br>var objTop = (screenHeight - obj.height())/2 + scrolltop;
<br>obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'});
<br>//
<br>$(window).resize(function() {
<br>screenWidth = $(window).width();
<br>screenHeight = $(window).height();
<br>scrolltop = $(document).scrollTop();
<br>objLeft = (screenWidth - obj.width())/2 ;
<br>objTop = (screenHeight - obj.height())/2 + scrolltop;
<br>obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'});
<br>});
<br>// 、
<br>$(window).scroll(function() {
<br>screenWidth = $(window).width();
<br>screenHeight = $(widow).height();
<br>scrolltop = $(document).scrollTop();
<br>objLeft = (screenWidth - obj.width())/2 ;
<br>objTop = (screenHeight - obj.height())/2 + scrolltop;
<br>obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'});
<br>});
<br>}
<br>//
<br>function check(obj, obj1, obj2) {
<br>obj1.click(function() {
<br>obj.remove();
<br>closed($('.mask'), $('.mess'));
<br>});
<br>obj2.click(function() {
<br>closed($('.mask'), $('.mess'));
<br>}) ;
<br>}
<br>//
<br>function closed(obj1, obj2) {
<br>obj1.hide();
<br>obj2.hide();
<br>}
<br>});
<br>
?