Создайте модальную панель, используя только Javascript - PullRequest
Новая
       1

Создайте модальную панель, используя только Javascript

0 голосов
/ 21 января 2019

Я хочу отобразить форму на боковой панели, используя панель (https://developer.microsoft.com/en-us/fabric-js/components/panel/panel).). Описание этого элемента управления предполагает его модальность, но он реализован таким образом, что панель закрывается при нажатии на оверлей. Я хочучтобы остановить это поведение, чтобы панель закрывалась, только когда пользователь нажимает кнопку «ОК», «Отмена» или кнопку «Закрыть» в правом верхнем углу.

Я знаю, что это возможно с помощью реагирования. Я пытаюсь добиться чего-то подобногона панель - Образец с прокруткой контента на https://developer.microsoft.com/en-us/fabric#/components/panel

1 Ответ

0 голосов
/ 21 января 2019 
var t = function() {
    function e(e) {
        if (e)
            this.overlayElement = e;
        else {
            var t = document.createElement("div");
            t.setAttribute("class", "ms-Overlay"),
            this.overlayElement = t
        }
        this.overlayElement.addEventListener("click", this.hide.bind(this), !1)
    }
    return e.prototype.remove = function() {
        this.overlayElement.parentElement.removeChild(this.overlayElement)
    }
    ,
    e.prototype.show = function() {
        this.overlayElement.classList.add("is-visible"),
        document.body.classList.add("ms-u-overflowHidden")
    }
    ,
    e.prototype.hide = function() {
        this.overlayElement.classList.remove("is-visible"),
        document.body.classList.remove("ms-u-overflowHidden")
    }
    ,
    e
}();

Вот исходный код fabricJS, который связывает функцию «hide» с событием click для элемента с классом ms-Overlay

, если вы удалили / прокомментировали функцию скрытия.Наложение не может быть удалено при нажатии.Это простой, но опасный способ.Другой подход будет к removeEventListener

...