0

Modal Window - Body Scrolling

asked 2018-08-26 21:00:06 +0800

psinalberth gravatar image psinalberth
52 6

updated 2018-08-28 09:29:19 +0800

cor3000 gravatar image cor3000
4141 1 7
ZK Team

Hi, I'm testing some modal window. The doModal(); method is invoked and everything works fine. My "problem" is with body behind modal, since it has a lot of content and it keeps scrolling. Is there any feature to fix that? I know that's the normal behavior and even Bootstrap does some workaround to do that by adding a modal-open class to body that sets overflow: hidden when their modal component is shown.

I've created an Interceptor looking for some onModal or onClose events to do something like that but I couldn't find them.

[Update]

Now I'm trying to override a method from Window but when the page is shown I get this error message:

setAttr Maximum call stack size exceeded (RangeError)

Here is the piece of code:

zk.afterLoad(function() {
    zul.wnd.Window = zk.$extends(zul.wnd.Window, {
            doModal: function() {
                alert("Hi!!")
                this.$supers("doModal");
            }
    });
});
delete flag offensive retag edit

2 Answers

Sort by ยป oldest newest most voted
0

answered 2018-08-28 09:26:23 +0800

psinalberth gravatar image psinalberth
52 6

updated 2018-08-28 09:30:36 +0800

After some reading I've reached to this piece of code:

zk.afterLoad("zul.wnd", function() {

    zul.wnd.Window.prototype.setVisible = function(visible) {

        if (visible) {
            jq(document.body).addClass('modal-open');
        } else {
            jq(document.body).removeClass('modal-open');
        }

        this.$supers('setVisible', arguments);
        this.zsync();
    };
});

My modal-open class is simply

.modal-open {
    overflow: hidden;
}

just like Bootstrap does.

I'd appreciate if someone else could try to run this code in some different situations. This code is satisfying my need at the moment;

link publish delete flag offensive edit
0

answered 2018-08-28 10:49:06 +0800

cor3000 gravatar image cor3000
4141 1 7
ZK Team

updated 2018-08-28 10:54:26 +0800

Thanks for sharing your solution ... I'd like to point out that this will affect all kinds of windows, not only the modal windows... and any visibility change of an embedded (into the page flow) would also trigger the css class. I propose this client side override to only affect windows in modal-mode.

zk.afterLoad('zul.wnd', function() {
    var xWindow = {};
    zk.override(zul.wnd.Window.prototype, xWindow, {
        setVisible : function(visible) {
            if(this.getMode() == 'modal') {
                jq(document.body).toggleClass('modal-open', visible)
            }
            xWindow.setVisible.apply(this, arguments);
        }
    });//zk.override
});//zk.afterLoad

By using zk.override you don't have to copy the content of the original method and you can simply call the original method from the backup object xWindow.

Still this code doesn't cover nested modal windows ... if that's an issue additional logic would be needed.

runnable example on zkfiddle

link publish delete flag offensive edit

Comments

Thanks! I'll try this code;

psinalberth ( 2018-08-28 17:51:18 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2018-08-26 21:00:06 +0800

Seen: 13 times

Last updated: Aug 28

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More