0

При закрытие модального окна, оно удаляется, но при повторном нажатии на кнопку добавить статью появляется два модальных окна, в чём может быть проблема? Ссылка на jsfiddle https://jsfiddle.net/XoldpandaX/4u3xkhsy/

var List = function() {

    var _self = this;
    _self.articles = [];

    var
        modal   = document.createElement('div'), // Модальное окно
        body    = document.querySelector('body'); // body страницы

    var addButton = document.querySelector('._add'); // кнопка добавить статью

    _self.add = function(data) { // сохранить статью в список

    };

    // обработчики кнопок
    addButton.onclick = function() {
        modal.className = 'modal';
        modal.innerHTML += View.displayModal();
        body.style.overflow = 'hidden';
        body.appendChild(modal);
    };

    body.addEventListener('click', function(e) {
        if (e.target.classList.contains('modal__close')) {
            var modal = body.lastElementChild;
            body.removeChild(modal);
        }
    });


    // saveButton.onclick = function() {
    //
    // };


};

var Item = function(itemData) {

    var _self = this;

    //Item buttons
    var saveButton = null;
    var editButton = null;
    var cancelButton = null;
    var deleteButton = null;

    //Save article data
    _self.save = function(data){

    };

    //Edit article data
    _self.edit = function(){

    };

    //Delete article
    _self.delete = function(){

    };

    //Buttons handlers
    saveButton.onclick = function(){

    };
    editButton.onclick = function(){

    };
    cancelButton.onclick = function(){

    };
    deleteButton.onclick = function(){

    };

    //Init
    _self.save(itemData);
};

var View = {

    displayModal: function() {

        return'<div class="modal__content">'
            + displayModalHeader('Добавить статью')
            + displayModalBody('Название', 'Описание')
            + displayModalFooter('Добавить')
            +'</div>';



        function displayModalHeader(title) {
            return '<div class="modal__header">' +
                '<div class="modal__title"><h2>' + title + '</h2></div>' +
                '<span class="modal__close">&times</span>' +
                '</div>';
        }

        function displayModalBody(inputPlaceholder, textAreaPlaceholder) {
            return '<div class="modal__body">' +
                '<form class="form">'+
                '<input class="form__title" placeholder='+ inputPlaceholder +'>' +
                '<textarea class="form__description" cols="30" rows="7" placeholder='+ textAreaPlaceholder +'></textarea>' +
                '</form>'+
                '</div>';
        }

        function displayModalFooter(btnText) {
            return '<div class="modal__footer">' +
                '<div class="modl__btn-wrap">'+
                '<button class="btn btn_add-article" placeholder="">'+
                btnText + ' <i class="fa fa-long-arrow-right" aria-hidden="true"></i>' +
                '</button>' +
                '</div>'+
                '</div>';
        }
    }

};


var articlesList = new List();

1 ответ 1

0

Нужно создавать переменную modal при клике на кнопку addButton

addButton.onclick = function() {
        var modal   = document.createElement('div'); // Модальное окно
        modal.className = 'modal';
        modal.innerHTML += View.displayModal();
        body.style.overflow = 'hidden';
        body.appendChild(modal);
    };

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.