CODEWITHSUNDEEP
javascriptoffice-ui-fabric
Dan
Dan

Reputation: 21

Create a Modal Panel using Javascript only

I want to display a form in a sidebar using a panel (https://developer.microsoft.com/en-us/fabric-js/components/panel/panel). The description of this control suggests it's modal, but it's implemented in such a way that panel is dismissed when the overlay is clicked. I want to stop this behaviour so that the panel is only dismissed when the user clicks Ok, Cancel or the close button at the top right.

I know that this is possible using react. I'm trying to achieve something similar to the Panel - Scrolling Content Sample at https://developer.microsoft.com/en-us/fabric#/components/panel

Upvotes: 1

Views: 229

Answers (1)

Aaron
Aaron

Reputation: 1208

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
}();

Here's the fabricJS source code, which binds the "hide" function to the click event for the element with class ms-Overlay

if you remove/comment the hide function. The overlay won't be able to be removed on click. That's the easy but dangerous way. Another approach would be to removeEventListener

Upvotes: 1

Related Questions