0

基本的に、ポップアップを作成し、ページの上部に配置しましたが、これはうまく機能しますが、上部に表示されるだけなので、下部のフッター リンクでは明らかに機能しません。

リンクが押された場所に関係なく、中央にポップアップできるようにしたいのですが、これが理にかなっていることを願っています.

この問題を解決する方法に関する有用なチュートリアルではなく、インターネットを検索してみました。

そこで私は Stackoverflow の力に目を向けました。

ビジュアル: http://madaxedesign.co.uk/

Jクエリ:

    $('a.contact , a.contact_footer, a.contact_text').click(function() {
    $("#popup").load("contact.php");
    // Getting the variable's value from a link
    var 
    show = $('#popup').css('display', 'block'),
    popup = $(this).attr('href');

    //Fade in the Popup and add close button
    $(popup).fadeIn(300);

    //Set the center alignment padding + border
    var popMargTop = ($(popup).height() + 24) / 2; 
    var popMargLeft = ($(popup).width() + 24) / 2; 

    $(popup).css({ 
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });

    // Add the mask to body
    $('body').append('<div id="mask"></div>');
    $('#mask').fadeIn(300);

    return false;
});

// When clicking on the button close or the mask layer the popup closed
$('a.cross, #mask').live('click', function() { 
  $('#mask , #popup').fadeOut(300 , function() {
    $('#mask').remove();  
}); 
return false;
});

さらに情報が必要な場合は、お問い合わせください。

4

3 に答える 3

0

ページの中央または要素に画像を表示するには、次の css コードを使用します。

.element{position:absolute; display:block; margin:auto; top:0; bottom:0; left:0; right:0;}

ちなみに、単一の画像ファイルを表示する場合、これは Firefox が使用するコードと同じです。ポップアップでも機能するはずだと思います。

于 2013-04-24T20:03:09.157 に答える
0

この状況で使用したコードの一部を次に示します。コードに似るように変更しました。

var view_width = $(window).width();
var view_top = $(window).scrollTop() + 70;

// Move the lightbox to the middle of the screen.
$( popup ).css("left", (view_width - $( popup ).width() ) / 2 );
// Make sure the window is in view no matter where you are on the page
$( popup ).css("top", view_top);
于 2013-04-24T20:00:46.863 に答える