Develop Reference

Bootstrap: overlapping modal should not freeze underlying modal from scrolling

I KNOW that Bootstrap discourages overlapping modals. I hacked together a site really quickly to help with the whole coronavirus thing, and so my focus was on speed not getting everything perfect. Consequently today someone pointed out a bug. Normally what happens with a Bootstrap modal:
Bootstrap sets scroll automatically a based on modal content, that is if content requires scroll, I guess the appropriate CSS is added
When a modal is open, the background content (that's covered by tinted overlay), is not scrollable
Once the modal is closed, the background content becomes scrollable again
My problem right now is that in my overlapping modal situation, the second modal that opens on top of the first one causes the content of the first modal to stay unscrollable, even when the second, overlapping modal is closed.
My desired behavior is that when the second modal is closed, the first modal returns to "default", that is, if the content requires scrollability, the scroll returns.
Here's a live site: https://www.giftcardsforsmallbusinesses.com/
Click to follow the modal: If you would like to be listed here, click here (ensure you're viewing this on a screen when there modal content requires scrolling, which is most screens... it's a lot of content)
On the modal that pops up, find #4 on How It Works, and click the bonus value
A second, small modal will pop up
Now close the second, smaller modal
You'll notice now that the first modal: Are you a small business owner? is no longer scrollable. Curiously, the background content, the original page, is now scrollable
I feel like there's a quick & dirty answer here... I can just inject something where it's like
PSEUDOCODE
$("#second-modal").on("close", function() {
$("#first-modal").resetDefault()
})
But I don't have enough experience with Twitter Bootstrap to know how to do this, and I couldn't find the answer in the docs.

This should fix it...
$('.modal').on("hidden.bs.modal", function (e) {
if ($('.modal:visible').length) {
$('body').addClass('modal-open');
}
});
When you close the overlapped bonus modal, it removes the body class .modal-open by default (not knowing there is another modal below it). This class applies overflow:hidden; to the body and enables modals to scroll independently.
So the above script is basically adding the class again when the bonus modal is closed/hidden.
Try this, this is directly targeting the bonus modal hidden event.
$('#expirationModal').on('hidden.bs.modal', function () {
$('BODY').addClass('modal-open');
})

Ionic 2 loading spinner user dismissal

So I have a loading spinner currently working well in my Ionic 2 app. I can even dismiss it after a certain time and display a custom spinner popup. However, what I would like to implement is for the ability of the second popup spinner to be dismissed by the user - This would be useful for when the app takes a long time or hangs on loading certain things.
I have tried adding a (click) event to the popup but keep getting a "sanitising HTML stripped some content" warning and the popup remains unresponsive.
Is there a way I can get a loading popup to be dismissed on request?

I use this to remove any overlays present on the screen.
let activePortal = ionicApp._loadingPortal.getActive() ||
this.ionicApp._modalPortal.getActive() ||
this.ionicApp._toastPortal.getActive() ||
this.ionicApp._overlayPortal.getActive();
if (activePortal) {
activePortal.dismiss();
}
I generally use it with a back button listener so the user can remove the overlays on back press in android.

What is happening after dismissing alert and how to simulate it?

I have this strange issue with web app I am working on. Basically there is a UI error, that after pulling menu from the side and closing it again, the whole DOM is moved half off the screen.
The interesting part is that if I call alert(); after the menu slides out again, something happens with the view and page is displayed correctly again.
I have tried to re-render dom by hiding it and showing again, but it doesnt have the same effect.
Does anyone know what happens when alert window is displayed/closed and if there is any way to simulate it in JS?
Thanks
UPDATE: Just so you can see I didn't make that up: https://github.com/jakiestfu/Snap.js/issues/238

GWT - how to prevent user from accessing other parts of application when popup is showing

I am rendering a html page that contains a button.
I have bind a method to browser window that opens a gwt popup when the button is invoked.
My problem is, when i scroll the page, the popup stays fixed and the page scrolls. I want the popup to be scrolled along with the html page.
Also, the user should not be allowed to access other parts of app when the popup is open.
Can somebody help me

Assuming you are using the PopupPanel class, it is as easy as calling the right constructor:
PopupPanel(boolean autoHide, boolean modal)
autoHide - true if the popup should be automatically hidden when the user clicks outside of it or the history token changes.
modal - true if keyboard or mouse events that do not target the PopupPanel or its children should be ignored
So if you set the modal parameter, you cannot click outside of the popup, and also the scroll event should not happen at all (that is somewhat right, as scrolling a popup with a fixed positioning doesn't make much sense... Oh well, for a non advertising purpose at least).

popup loading window

I want a popup screen to show the user that "this part" or "that part" of my app is loading....A lot of things within my app is referenced content so sometimes it takes a sec to load...
I'm new to Ajax (so pardon me, please), but I want a popup window to appear to the user in Ajax or JavaScript to let the user know the app is "loading" when the user finger taps something that needs to load....For example content on the new screen....I hope I'm making sense here.... I don't know where to start when it comes to making this happen (cause I'm not a code warrior yet, still a bit green sry lol), so any help is appreciated. I'm using JavaScript and HTML5 so far, but I need a popup loading window widget...

You're probably looking for something along the lines of colorbox.js (http://www.jacklmoore.com/colorbox). In more general terms, what you're looking for is a modal dialog box. Modal dialog boxes can be contrasted with more basic dialog boxes that don't grey out the rest of the screen. jQuery UI includes such a dialog, which you can see here: http://jqueryui.com/demos/dialog/
Of course, these aren't going to give you a loading effect out of the box. You'll have to write code to check whatever loading conditions pertain to your app, then dismiss the dialog box. A very simple way to do this would be to use setTimeout in conjunction with an ajax call whose success handler dismisses the dialog box. Or, if you don't have a way to track your loading status, you could just use a simple dialog to prompt the user to wait (but that's not particularly nice for the user).