I am creating a popup form. I am using the code below and I want the form to show up in the center of the page with the pre determined height/width. The popup is all over the place. It will pop up on the left top, right middle and with different sizes. How can I set it to be consistent?
<a class="collapse-item" href="#" onclick="reqcred()">Cards</a>
<script>
function reqcred() {
w = window.open("{% url 'test_popup' %}","popup_form", 'left=100,top=100,height=450,width=650');
w.onload =
function() {
w.onunload = function() {
location.reload(true);
}}}
</script>
I figured it out. This is what I did.
<script>
function reqcred() {
var height = 750
var width = 950
var left = Number((screen.width/2)-(width/2));
var top = Number((screen.height/2)-(height/2));
w = window.open("{% url 'test_popup' %}","popup_form", 'width='+ width + ', height=' + height + ', top='
+ top + ', left=' + left);
w.onload =
function() {
w.onunload = function() {
location.reload(true);
}}}
</script>