Доброго времени суток друзья. У меня есть модальное окно, я хочу, чтобы оно выводилось по середине любого экрана (любых разрешений). Не пойму как это реализовать..
Вот код:
<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;
} |