Как выровнять модальное окно по центру экрана?

Question

[Сергей Рогов]

Доброго времени суток друзья. У меня есть модальное окно, я хочу, чтобы оно выводилось по середине любого экрана (любых разрешений). Не пойму как это реализовать..

<script>
    function setupTV() {

      const screenWidth = window.screen.width
      const screenHeight = window.screen.height
      
      var tv_height = 580;
      var tv_width = 950;
      
      if (screenWidth < 1537) {
          var tv_height = 450;
          var tv_width = 750;          
      }      

      $("a[data-token]").click(function (e) {
        var that = this;
        //Проверяем если виджет для данного токена показан, то дальше ни чего не делаем.
        if($(".graph_modal:visible[data-token='"+that.dataset.token+"']").length>0){
          return;
        }
        setTimeout(function () {
          $(".graph_modal").attr("data-token", that.dataset.token);
          $("#widget_container").empty();
          new TradingView.widget({
            "width": tv_width,
            "height": tv_height,
            "symbol": that.dataset.binance,
            "interval": "5",
            "timezone": "Europe/Moscow",
            "theme": "dark",
            "style": "1",
            "locale": "ru",
            "toolbar_bg": "#f1f3f6",
            "enable_publishing": false,
            "show_popup_button": true,
            "container_id": "widget_container",
            "studies": [
                "RSI@tv-basicstudies"],            
          });
          $(".graph_modal").show();
        }, 50);
      });
      $(".graph").mouseleave(function () {
        $("#widget_container").empty();
        $(".graph_modal").hide();
      });
    }

    function loadData() {
      $('#main').load(' #main', function () {
        setupTV();
      });
    }
    
    setInterval(function () { loadData() }, 11000);
    
    setupTV(); 
  </script>

<a href="#"><span class="title">APEUSDT</span></a> <a href="#" data-token='APEUSDT' data-binance='BINANCE:APEUSDT'><img class="graph_icon" src="images/gr.png"></a>

и стили

.graph_icon {
    width: 14px;
    height: 14px;
    margin-left: 3pt;
    vertical-align: middle;
    cursor: pointer;
}

.graph {
  position:fixed;
  margin:10px auto;
  height:16px;
  width:16px;
  cursor: pointer;
}

.graph_modal {
  display:none;
  height:200px;
  margin-left: 10pt;
}

.graph:hover .graph_modal {
  display:block;
  position:absolute;
  z-index:9999;
}

Comments

[Антон Литвиненко]

впервые вижу в верстке пункты. да, они существуют, но не могу придумать им раельного применения.
расскажите, что вас натолкнуло использовать пункты рядом с пикселями?
по поводу вопроса
если модалка небольшая, то
position: fixed
left 50%
top 50%
transform translate(-50%, -50%)

[Ankhena]

Сергей Рогов очень удобненько гридами на оверлей.
Во-первых, не залезет за верхний край окна в отличие от fixed/absolute, во-вторых, адекватно будет работать прокрутка в самом окне в отличие от флексов.

[Сергей Рогов]

Антон Литвиненко, просто для теста использовал пункты. Если я применяю эти стили, то скролл автоматически летит вверх и модальное окно появляется у нижней границе страницы. Можно как-то сделать, чтобы появлялось например сверху от курсора или чтобы если пользователь прокрутил страницу вниз, его не возвращало автоматически наверх?

[Сергей Рогов]

Ankhena, понять бы о чём вы говорите) как это применить конкретно к моему примеру ?

[Ankhena]

Сергей Рогов, вы даже не всю касающуюся модалки разметку выложили.
Сделайте песочницу с видимой проблемой на codepen.io

Answer 1

[Владислав Великоиваненко]

.modal{
   position:absolute;
   top:50%;
   left:50%;
   transform:translate(-50%, -50%);
}

Comments

[Сергей Рогов]

просто для теста использовал пункты. Если я применяю эти стили, то скролл автоматически летит вверх и модальное окно появляется у нижней границе страницы. Можно как-то сделать, чтобы появлялось например сверху от курсора или чтобы если пользователь прокрутил страницу вниз, его не возвращало автоматически наверх?