Как вместо alert вызывать модальное окно?

Question

[BestGamerTop1]

У меня есть игра крестики-нолики , и когда игрок нажимает на уже занятую ячейку, ему выскакивает сообщение (alert), что эта ячейка уже занята; или например, игрок проиграл или победил. Мой вопрос заключается в том, как заменить alert на модальное окно и сделать так, что бы там, где есть функция рестарт, тоже было модальное окно с этой функцией. И еще - само окно на бутстрап. Если что, вот код:

<!-- Modal -->
    <div class="modal fade" id="exampleModal" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

и такой Js:

let cell = document.getElementsByClassName('cell');
let currentPlayer = document.getElementById('curPlyr');

let player = "x";
let stat = {
    'x': 0,
    'o': 0,
    'd': 0
}
let winIndex = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
    [1, 4, 7],
    [2, 5, 8],
    [3, 6, 9],
    [1, 5, 9],
    [3, 5, 7]
];


for (let i = 0; i < cell.length; i++) {
    cell[i].addEventListener('click', cellClick, false);
}

function cellClick() {

    let data = [];

    if (!this.innerHTML) {
        this.innerHTML = player;
    } else {
        alert("Ячейка занята");
        return;
    }

    for (let i in cell) {
        if (cell[i].innerHTML == player) {
            data.push(parseInt(cell[i].getAttribute('pos')));
        }
    }

    if (checkWin(data)) {
        stat[player] += 1;
        restart("Выграл: " + player);
    } else {
        let draw = true;
        for (let i in cell) {
            if (cell[i].innerHTML == '') draw = false;
        }
        if (draw) {
            stat.d += 1;
            restart("Ничья");
        }
    }

    player = player == "x" ? "o" : "x";
    currentPlayer.innerHTML = player.toUpperCase();
}

function checkWin(data) {
    for (let i in winIndex) {
        let win = true;
        for (let j in winIndex[i]) {
            let id = winIndex[i][j];
            let ind = data.indexOf(id);

            if (ind == -1) {
                win = false
            }
        }

        if (win) return true;
    }
    return false;
}

function restart(text) {

    alert(text);
    for (let i = 0; i < cell.length; i++) {
        cell[i].innerHTML = '';
    }
    updateStat();
}

function updateStat() {
    document.getElementById('sX').innerHTML = stat.x;
    document.getElementById('sO').innerHTML = stat.o;
    document.getElementById('sD').innerHTML = stat.d;
}

Comments

[Anonymous Penguin]

Грамматику стоит подтянуть

Answer 1

[Anonymous Penguin]

Как я понимаю, у тебя класс Fade - означает видимость окна

const modalId = 'exampleModal';
const modal = document.getElementById(modalId);
window.alert = function (text) {
  modal.classList.remove('fade');
  modal.getElementsByClassName('modal-body')[0].innerHTML = text;
};
[...modal.getElementsByClassName('btn')].forEach(el => {
  el.addEventListener('click', hideModal);
});
function hideModal() {
  modal.classList.add('fade');
}

alert('Test');

Comments

[BestGamerTop1]

Нет клас fade означает красивое появление окна и исчезание ето клас bootstrap 5, но я так понимаю что я могу туда там где етот клас написать еще какой то клас и замисть класа fade там где ти его писал в js подставить свой какой я напишу?

[Anonymous Penguin]

BestGamerTop1, я в бутстрап не разбираюсь, но можешь в своей таблице стилей создать класс, допустим:

.disp-none {
  display: none;
}

В разметку, где модальное окно, тоже добавить этот класс:

<div class="modal fade disp-none"    ...>
...

И в скрипте, как раз который я оставил в ответе, fade заменить на этот класс:

...
modal.classList.remove('disp-none');
...
modal.classList.add('disp-none');
...

[BestGamerTop1]

Anonymous Penguin, а зачем ви в конце js кода добавили алерт(тест)?

[Anonymous Penguin]

BestGamerTop1, для видимости, что метод alert был переопределен. Ты его, конечно, не вставляй в готовый код