Centering Special Javascript Popup, How?


Tags: javascript,css,popup,popupwindow

Problem :

I have this javascript code, lib.js. It manages my every java popup in my site. How ever it is not set to be appear absolutely centered in page, I have tried several css codes for its div. But it did not work. I also tried the famous /2 code but it didnt work or I might have added it to wrong place.

Below is my lib.js:

var currentTime = new Date();

var topP = 0;

$(document, window).keypress(function(e){

if (e.keyCode == 27){

    $(".yekbox").fadeOut();

    $("#yekbox_overlay").hide();

}

});

$(document).ready(function() {

$(".showme").unbind().hover(

    function(e) {

        $(".tooltip").remove();

        this.t = $(this).next(".description").html();

        $(this).append( '<div class="tooltip">' + this.t + '</div>' );

    },

    function() {

        //this.title = this.t;

        $(".tooltip").remove();

    }

).mousemove(

    function(e) {

        $(".tooltip").css({

            "top" : e.pageY + 20,

            "left" : e.pageX + 20

        });

    }

);

topP = $(this).scrollTop();

//$(".yekbox").css("top", $(window).height()-250 + "px");

//$(".yekbox").css("left", $(window).width()-(440*2) + "px");



$("#yekbox_overlay").css("height", $(window).height());

$(window, document).resize(function(){

    topP = $(this).scrollTop();

    $(".yekbox").css("marginTop", topP-250 + "px");

    if ($(window).width() > 900 ) $(".yekbox").css("left", $(window).width()-(440*2) + "px");

    $(".yekbox").css("marginLeft", "auto");

    $(".yekbox").css("marginRight", "auto");

    $("#yekbox_overlay").css("height", $(window).height());



});

$(window).scroll(function () {

    topP = $(this).scrollTop();

    $(".yekbox:visible").css("marginTop", topP-250 + "px");

    $("#yekbox_overlay:visible").css("height", $(window).height());

});

$(window).bind("scroll",function () {

    topP = $(this).scrollTop();

    $(".yekbox:visible").css("marginTop", topP-250 + "px");

    $("#yekbox_overlay:visible").css("height", $(window).height());

});

$("#yekbox_overlay").click(function(){

    $(".yekbox").fadeOut();

    $(this).hide();

    return false;

});


Solution :

The JS and HTML code above doesn't help in anything.

In general, if you want a block to be centered to the parent, it should have

  • A fixed width
  • margin: auto

If you want a block absolutely centered (position absolute or fixed)

  • $('#mypopup').css('left', ($(window).width() - $('#mypopup').width()) / 2)

    CSS Howto..

    How can I stretch an empty floating div to the full height available using css?

    How do i make div go under another div making columns

    How to beautify this nested list with css?

    How to change css from javascripts

    How to have one div overlap two other divs?

    How do you disable the set width of parent element for child element?

    How to prevent adding CSS 'class' properties

    How to align text within div?

    How to get ID from CSS to Javascript without getElementByID?

    How to load multiple images quickly (without Css Sprites)

    How do I access separate points/sections on a single image in html/javascript?

    How do i make liteAccordion (horizontal accordion plugin for jQuery) work in IE6

    How to specify the system’s default serif and sans-serif font-family?

    How do I use CSS to add a non-rectangular border around an image?

    How can I do to merge font attributes in css

    How to hide overflow on slideshow without hiding arrows?

    Css: How to make position fixed 100% resizable with bottom padding? - JS Fiddle provded

    How can I automatically change the CSS min-height value of a div when a JavaScript is performed?

    How to put all my elements in line horizontally and Should be Responsive using bootstrap?

    how to keep form element inline with text on headline in HTML/css/boostrap 3?

    How to not repeat a CSS background gradient

    How does max-width property make images responsive?

    How to add an additional css class from code behind using ASP.NET?

    How can I float two tables next to each other left to right and center them both?

    CSS, Javascipt, HTML, how can i align a text inside a div to middle beside an image? and animate the text

    How to make image override parent width and stretch to browser width?

    How to insert line breaks in HTML documents using CSS

    How to get to be the same width as
    ?

    How to write CSS to convert div elements into a 3 or 4 column table?

    CSS div border shows up, but is transparent