jQuery   发布时间:2022-04-19  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Jquery弹出模式必须居中大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
好的,我有这个代码

//When you click on a link with class of poplight and the href starts with  a # 
$('a.poplight[href^=#]').click(function() {
var a = $(this).attr('vd');
var b = $(this).attr('id');

    $.post('chk.PHP',{ name : a,name2 : b },function(output) {
    $('#con').html(output).show();
});

    var popID = $(this).attr('rel'); //Get Popup Name

    var popURL = $(this).attr('href'); //Get Popup href to define size



    //Pull Query & Variables from href URL

    var query= popURl.split('?');

    var dim= querY[1].split('&');

    var popWidth = dim[0].split('=')[1]; //Gets the first query String value


    //Fade in the Popup and add close button

    $('#' + popID).fadeIn().css({ 'width': number( popWidth ) }).prepend('<a     href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');



    //Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css

    var popMargTop = ($('#' + popID).height() + 80) / 2;

    var popMargLeft = ($('#' + popID).width() + 80) / 2;

    //Apply Margin to Popup

    $('#' + popID).css({ 

        'margin-top' : -popMargTop,'margin-left' : -popMargLeft

    });

    //Fade in BACkground

    $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.

    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 



    return false;

});


//Close Popups and Fade Layer

$('a.close').live('click',function() { //When clicking on the close or fade layer...

    $('#fade,.popup_block,.login').fadeOut(function() {
    $('#fade').remove();

}); //fade them both out



    return false;

});
//end poup

现在,每当用户点击具有一类poplight的元素时,就会执行上面的代码并且它应该显示具有popup_block类的div但在此之前调用ajax函数并且我没有问题但是那个div(它有一个popup_block的类)的中心主义已经丢失了,或者它看起来很糟糕,因为你看到那里有一个代码实现了div的中心主义,但它没有,它只在我指定位置时居中css或css上div的宽度和高度,但我不想这样做,jquery函数应该这样做(参见代码,它已在那里实现).也许我的代码缺乏,或者我只是想念一些东西,但无论如何,我不知道.请帮忙,我只是想把这个div放在电话中心.谢谢你提前.

-t div(有一个popup_block类)是固定的,z-index:99999并且没有defaut显示.

解决方法

以div为中心必须尊重窗口.这是你如何做到这一点.

假设#div是要居中的框

$("#div").css({
    marginTop : ($(window).height() - $(this).height())/2,marginLeft : ($(window).width() - $(this).width())/2,});

如果您有绝对位置框,则分别使用top和left而不是marginTop和marginLeft.

$("#div").css({
    top : ($(window).height() - $(this).height())/2,left : ($(window).width() - $(this).width())/2,});

大佬总结

以上是大佬教程为你收集整理的Jquery弹出模式必须居中全部内容,希望文章能够帮你解决Jquery弹出模式必须居中所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。