如何垂直居中jQuery Modal？

Question

jQuery code:

function thumb(id,ths) {
    if (<?=$loggedin?>) {
        $.post(base_url+"index.php/myad/addthumbs", {uniqueid:id});
        $(ths).addClass("red");
    } else {
        _ths=$(ths);
        var number = Math.floor(Math.random()*90000) + 10000;
        $("#captcha").attr("data-id",id);
        $("#captcha").text(number);
        $("#pop").modal("show");
    }
}

How can I center modal? Please help me and thanks in advance.

I find solution on google and on stackoverflow but question is asked for bootstrap based modal when it build by a pure jquery.

Answer 1

One method is you can adjust the percentage of margin-top style

.modal-dialog {
    margin-top:10%;  /* Based on your modal height adjust the percentage */
}

OR

.modal-dialog {
    padding-top:10%; /* Based on your modal height adjust the percentage */
}

Answer 2

Give your popup a fixed css like this:

#pop {
  position:fixed;
  top:50%;
  left:50%;
}

Then align it by it´s width and height in your JS:

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

Answer 3

Without using jQuery, you can simply use display: table to the main content container together with margin: auto .

A working example of this centered modal is here .

Basically, these are the important rules:

.modal-content {
    display: table;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-width: 60%; /* here you can also use a fixed width */
    overflow: auto;
    z-index: 50;
}

Use JavaScript or jQuery to trigger the opening and closing of the modal.