jqueryベースのポップアップ・プロンプト・ボックスは、常にウィンドウの中央にあります(alertポップアップ・ボックスのような効果です).

3401 ワード

原理は簡単です.
ブラウザによってフォームのサイズが異なるため、現在の画面(フォーム)の幅と高さを取得します.これがあれば、垂直中央の座標を計算することができます.しかし、スライドしたスクロールバーはどうして垂直に中央にあるのだろうか.このとき、現在のフォームのページ上部からの高さを取得し、先ほどの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>