Disabling a form

I have form which opens another smaller form in the centre of the screen. Is there a simple way of disabling the form behind the smaller form? Making the smaller form Modal seems to throw the objects out of whack.

If you do the modal form properly, it should stop clicks outside the modal form from doing anything.

Does the Modal sample work properly for you?

Appears on the screen ok. The remaining form darkens but clicking on the darkened area hides the model form.

My issue is in the design screen when I switch the form to modal is it shrinks width up by 50%, moving and squashing all the controls set as a percentage.

What is the form’s screenMode set to?

With the modal sample….

Actual size for Modal1.

Full size for Form1.

How can I reproduce what you are seeing?

The sample still reacts as @lotsofcows stated last year. EG, when pressing on anywhere while the modal form is displayed, causes the onclick of the button to be fired.

Actually, I tried some more on this.

First - it’s not the button click that is firing, it the X on the modal form’s event that is being fired when you click outside - in the grayed area - of the modal form.

screenMode doesn’t fix the issue.

And if you go to W3Schools for Bootstrap 4 Modal Forms you’ll see the sample reacts the same. So this is not an AppStudio issue, which I suppose was discovered last year.

I’d like to capture the “onclick” that is causing this and ignore it. If the user wants to cancel the wait, they need to press the button, not the grayed area.

Or, does someone have a better solution.

My work around was to put a label as the first control on the “modal” form which covers the whole screen. I set top and left to -1000, and height and width to something large. This “captures” the off form clicks. I coloured it black with 80% transparency to darken out the previous form. I put a white label on top of that to define the “modal” form.

This was a nice learning experience. It seems that a Modal form in AppStudio is not the same as a Bootstrap Modal control. Their are two samples. I’ve abandoned the Modal form over the Modal control, as I was able to get the results needed.

In the Bootstrap 4 Modal sample, if you change the samples button1.onclick to the following, it disables the background clicks and keyboard input, eg, ESC:

    Button1.onclick = function() {
    $('#Modal1').modal({
        backdrop: 'static',
        keyboard: false  // to prevent closing with Esc button (if you want this too)
    })
    Modal1.toggle();
    };

Now, if you don’t want a close X button in the upper right, eg, the user must do what you are asking them to do, or must wait, that can be done by adding:

Button1.onclick = function() {
$('#Modal1').modal({
    backdrop: 'static',
    keyboard: false  // to prevent closing with Esc button (if you want this too)
})
document.getElementById('Modal1').getElementsByClassName('modal-header')[0].innerHTML = '';
Modal1.toggle();
};

I forgot that I also wanted to remove the header as well, which is what the code does above. To remove just the button, you’ll need to “edit” the innerHTML to remove just the button tag.

Here is the BS4 Modal sample modified to show what is listed above in action, with a pretty spinner.
Also note the background around the modal is transparent.

Modal.appstudio.zip (21.4 KB)

Thanks! OK if we adapt this as the official sample?

Share your story with the AppStudio Community! Quarantine Stories

UPDATE to the sample uploaded.

In the sample, I destructively remove the HTML for the close button in the upper left of the modal. Besides that it is a bad practice, it also was counterproductive for me, as I find myself using the same modal for a second message, which should have the close button.

Here’s the change to Main() to hide the close button, verses the destructive method:

  tmp = document.getElementById('Modal1').getElementsByClassName('modal-header')[0].innerHTML;
  tmp = tmp.substr(0, tmp.indexOf('</h4>') + 5);
  document.getElementById('Modal1').getElementsByClassName('modal-header')[0].innerHTML = tmp;
  document.getElementById('Modal1').getElementsByClassName('close')[0].style.display = 'none';

Setting style.display back to ‘’ will reshow the close button.

UPDATE - MORE: Above, where I set the modal’s backdrop and keyboard setting, it is important to note that they must be set prior to displaying the modal the first time. If you want to change these settings for a subsequent display of the modal, you need to dispose of the modal first, then you can set these items successfully and display the modal with these new settings.

$('#Modal1').modal('dispose');

You will need to hide the modal prior to using the dispose. Otherwise the dispose has no effect.

Warning: If you use the dispose function of a modal, it seems to kill the associated events you may have tied to the modal, like hidden and shown events. It may be a lot easier to have multiple modals if you need different backdrop and/or keyboard settings, rather than dealing with event recreation.