Bootstrap: overlapping modal should not freeze underlying modal from scrolling - javascript

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

Related

Bootstrap Modal Box content

I'm using a modal box to display my advertising work for my portfolio. The modals are functioning properly for the most part, but it seems like the content within the modals is blocking my navbar at the top.
Without dynamically loading the content, is there a way to make the content of the modals not interfere with the navbar? I tried giving the navbar a higher z-index, but that didn't seem to do the trick. I gave the modal content as well as the modal.backdrop a lower z-index, but nothing seems to be doing the trick.
Here is a link to the page: http://0034191.netsolhost.com/ryancurtis/advertising.html
This might by an easy fix, but I've tried everything within my skill set. I'm pretty new to bootstrap.
Don't make the dialog modal. You can still pop-up the dialog, but don't make it modal. Modal prevents the user from seeing/interacting with what lies beneath.
It's easier to see the distinction via this example from the jQueryUI dialog (a very similar system).
I'm not fluent with bootstrap, but it appears that you would make your dialog an alert rather than a model.
Note that you can mix/intermingle bootstrap with jQueryUI if you wished to do so. They both run on top of jQuery, just include both libraries.
why dont u give padding/top margin for modal?
i guess its simplest solution..
<style>
.modal {
margin-top:50px;
}
</style>
or with JS
<script>
{
$("#myModal").animate({"width":"1100px","left":"30%"},3000,'easeInCirc');
}
</script>

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).

Sliding panels closing when clicked outsite and linking to an open panel

I am planing to use sliding panels as pages for this website.
Even tough I am a JS noob I managed to find and edit scripts until I got pretty much the perfect script
Problem is that the sliding panels are closing when clicked outside. I want then to close when another panel opens but not when somebody clicks outside the panel.
Also this will be an one page design except the portfolio. I a link to index.html with the portfolio panel open. Can I do that? To understand better what I mean please check this image.
Edit: Okay I will explain better.
This will be a one page design, since I will be using sliding panels for pages. However each gallery item will have it's own html page because I do not want the site to be slow.
So I need to link portfolioitem1.html to the index.html with the portfolio panel open just like in the image I posted
Here's a jsFiddle that solves the first part of the problem:
http://jsfiddle.net/aUHwA/1/
The thing that was causing the panels to collapse was the document.click() function you were using. I've moved everything into a $(document).ready() function, added some generic wrappers for the sliders and buttons, and used a generic click function that's shared across all three buttons.
The click function uses the data-rel property of the button that was clicked to decide what panel it should toggle. It also hides any panels that are already visible within the #content div.
To open the portfolio panel by default, you can add this immediately after the on('click') function:
$('#portfolio_button').click();
That will trigger the portfolio animation (see http://jsfiddle.net/aUHwA/3/). Alternatively:
$('#portfolio').slideToggle(0);
will open the portfolio panel instantly, without the sliding animation (see http://jsfiddle.net/aUHwA/2/).

Can you give a Modal Window (using Twitter-Bootstrap) a z-index?

I have a form using Qtip2 and if the user submits the form with invalid values, the qTips fire correctly (so far so good). However, say the user wants clicks on a button that triggers the modal window to appear, the modal window appears above the form but below the qtips. So, I'm thinking, just give the Modal window a higher z-index value.
Modal Example with qTip
Has anyone else run across this behavior and what did you do to resolve it?
The lastest version of bootstrap shows the modal has a z-index of 1050. I believe the default z-index of qTip2 is 15001, and goes higher from there. You would have to up the z-index of the modal.
Edited: Removed incorrect information.

How to disable page scroll when opening dialog box?

I'm having significant trouble with a jquery dialog box that opens in response to a .hover() command, and closes upon leaving the hover (which of course takes two functions).
When the dialog box opens a little bit out of the page, the entire page scrolls up; I want to disable this but I can't figure out how.
I have tried:
using event.preventDefault()
putting the ui-dialog css as 'position: relative'
setting the scroll bar back where it was (but this looks terrible)
Any other ideas?
Edit: Here is the code in jsfiddle: http://jsfiddle.net/TzUf3/1
Make sure the popup has its position fixed, then set the body to overflow:hidden;
When the dialogue is closed remove the overflow attribute.

Categories

Resources