Как вертикально центрировать jQuery Modal?

код jQuery:

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");
    }
}

Как я могу центрировать модальное? Пожалуйста, помогите мне и заранее спасибо.

Я нахожу решение на google и на stackoverflow, но вопрос задается для bootstrap на основе модального, когда он строит чистый jquery.

3 ответа

  1. Один из методов-вы можете настроить процент стиля margin-top

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

    ИЛИ

    .modal-dialog {
        padding-top:10%; /* Based on your modal height adjust the percentage */
    }
    
  2. Дайте всплывающее окно фиксированный css, как это:

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

    Затем выровняйте его по ширине и высоте в JS:

    $("#pop").css({
      "margin-top":-($(this).height()/2),
      "margin-left":-($(this).width()/2)
    });
    
  3. Без использования jQuery, вы можете просто использовать display: tableк основному контейнеру содержания вместе с margin: auto.

    Рабочий пример этого центрированного модального здесь .

    В основном, это важные правила:

    .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;
    }
    

    Используйте JavaScript или jQuery, чтобы вызвать Открытие и закрытие модального.