Question

I’ve got a popup working with jQuery but it is rendering at the same place as the DIV. I’d like the popup to render in the middle of the page. Is it possible? If yes, then how?

My CSS:

.newpopup {
    display:none;
    border: 1px solid black;
    background-color: #eee;
}

HTML:

 <div class='newpopup'>
</div>
<button>popup</button>

JavaScript:

function popup() {
    alert('test');
    var popup = $('.newpopup');
    popup.draggable();
    popup.resizable();
    popup.html('<p>Where is pancakes house?</p>');
    popup.show('fast');
}
$(document).ready(function(){
  $('button').click(function(){
     popup();
  });
})

Answer 1

Set your popup css position : absolute and use top & left properties to set your popup position.

  .newpopup {
    display:none;
    border: 1px solid black;
    background-color: #eee;
    position:absolute;
    top:50%;
    left:50%;
}

EDIT

I created a fiddle , Jsfiddle it works perfectly here, check it out.