Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.04.2022, 12:11
Интересующийся
Отправить личное сообщение для Sice Посмотреть профиль Найти все сообщения от Sice
 
Регистрация: 16.06.2014
Сообщений: 23

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

Вот код:
<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="toast-title">APEUSDT</span>USDT</a> <a href="#" data-token='BTCUSDT' data-binance='BINANCE:BTCUSDT'><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;
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как передать параметр в модальное окно? andrey8501 Общие вопросы Javascript 6 11.10.2019 20:44
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Как заставить модальное окно закрыться само? culttm Events/DOM/Window 1 29.08.2012 17:58
Как передать текст в input в модальное окно открытое jquery SpiritDark Элементы интерфейса 0 28.04.2012 21:46
Как узнать свернуто окно браузера или нет. bar-boss Events/DOM/Window 3 25.09.2008 16:09