Как выводить попап с помощью JavaScript?

Question

[Ex1st]

Всем привет. Суть заключается в том, что мой поп ап выводится не по кнопке, а по условию

if(document.URL.indexOf("/catalog/furshetnye_zakuski/")!=-1)

Как с помощью этого условия вывести поп ап? Он уже полностью свёрстан. Проблема в том, что я не знаю JS, а сделать нужно сейчас.
Прошу помощи

UPDATE:
В комментариях

Comments

[Антон]

Создайте блок, скройте его, z index'ом вытащите его на передний план.
По условию display block к блоку попапа.
По крестику опять дисплей нон.

[Pashok Doom]

А как попап вообще реализован? НА плагинах или самопис какой-то?

[Ex1st]

Антон, Поправьте пожалуйста. Вот сам поп-ап

<div class="popup" id="mymodal">
<div class="popup-content">
            <div class="popup-title"></div>
            <div class="popup-text">Уважаемый гость,
сумма Вашего заказа составляет<br><br>Укажите адрес доставки, контактные данные.
Необходимые Вам дату и время доставки
внесите в поле «Время доставки - Указать время».
Если до доставки остаётся более 24 часов,
наценка за срочность не будет применена и
заявленная итоговая стоимость не изменится.
Разумеется, скидки сохранятся в любом случае
</div>
<input type="button" class="close" value="Понятно">
    </div>
    </div>
</div>

Получается, код будет такой:

var modal = document.getElementById("mymodal");
var btn = document.getElementsByClassName("close");

if(document.URL.indexOf("/catalog/furshetnye_zakuski/")!=-1) {
modal.style.display = "block";
}

btn.onclick = function(modal) {
    modal.style.display = "none";
  }

Скорее всего накосячил по синтаксису

[Ex1st]

Pashok Doom, самопис, код выше

[Ex1st]

Код поправил до такого:

<script>
var modal = document.getElementById("mymodal");
var btn = document.getElementById("test");

if(document.URL.indexOf("/catalog/furshetnye_zakuski/")!=-1) {
modal.style.display = "block";
}

btn['0'].onclick = function() {
    modal.style.display = "none";
  }

</script>

по юрлу поп ап всплывает, но по кнопке закрываться не хочет :(

[Антон]

Ex1st, в ванильном JS я не секу, но суть верная.

[Tim]

Ex1st,

Answer 1

[Ex1st]

<script>
var modal = document.getElementById("mymodal");
var btn = document.getElementById("test");

if(document.URL.indexOf("/catalog/furshetnye_zakuski/")!=-1) {
modal.style.display = "block";
}

     btn.onclick = function() {
    modal.style.display = "none";
  }
  

</script>

Answer 2

[Rerurk]

<div id="popUp"
     style="position: absolute;width: 100px;height: 100px;background: yellow;color: black;border-radius: 10px;border: solid 1px #000;text-align: center" hidden=true>
	<span id="popUpText">это текс поп ап</span>
	<button id="btPopUpClose" style="">закрыть</button>
</div>
<script>
	
	let docUrl='http://localhost';///значение url при котором всплывает попап
	let popUpMess='покаазываем ПОПАП'; // тест попапа
    if (!document.URL.indexOf(docUrl)){
        document.getElementById('popUp').hidden = false;
        document.getElementById('popUpText').innerHTML=popUpMess;
        let btPopupClose = document.getElementById('btPopUpClose');
        btPopupClose.onmousedown = () => {
            document.getElementById('popUp').hidden = true;
            
        }
    }
</script>