@BestGamerTop1

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

У меня есть игра крестики-нолики , и когда игрок нажимает на уже занятую ячейку, ему выскакивает сообщение (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;
}
  • Вопрос задан
  • 57 просмотров
Пригласить эксперта
Ответы на вопрос 1
Anopeng
@Anopeng
Веб-программист, учу фронт и бек
Как я понимаю, у тебя класс 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');
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы