CODEWITHSUNDEEP
jqueryhtml
Anton Koval'
Anton Koval'

Reputation: 5063

jQuery: best way to place dom element in the center of viewport

I'm looking for a proper way of placing popup div-element in the center of current view area.

For example: we have some div element with {display:none; position:absolute} and few buttons, one on the top of document, second in the center and last one, somewhere in the bottom. By clicking on any of this button, div should appear in the center of current viewing area

$(".btnClass").click(function(){
    //some actions for positioning here
    $(div_id).show()  
})

Upvotes: 2

Views: 732

Answers (1)

David Murdoch
David Murdoch

Reputation: 89332

The following will do it. Although there are other ways (using CSS, margins, overflows, etc)...so this may not be the answer to your question depending on what you consider "best" to be.

$(".btn_class").click(function(){
    var win = $(window),
        winW = win.width(),
        winH = win.height(),
        scrollTop = win.scrollTop(),
        scrollLeft = win.scrollLeft(),
        container = $("#div_id").css({"display":"block","visibility":"hidden"}),
        contW = container.width(),
        contH = container.height(),
        left = (winW-contW)/2+scrollLeft,
        top = (winH-contH)/2+scrollTop;

    container.css({"left":left,"top":top,"visibility":"visible"});
});

You may have to adjust the scrollLeft and scrollTop...I'm being distracted and can't think (sigh, I wish I had my private office again).

Upvotes: 1

Related Questions