I've made a modal by loosely following this. The problem is that I don't want to be able to scroll the rest of the page while the modal is showing. How can this be done?
Related
Quick note : I have read other similar questions, but they are all about modal opening up as overlay on body and they want to stop scroll on body.
But in my case, when I open the toggle the page autoscrolls and I don't want that to happen I want it to stay at same place.
Here is the link ( http://isma.tomorrowing.today/ ) where you can see the issue in test text 2 or 3 section by clicking any of the 'Read Text' button.
I want the webpage to stay at some position even when toggle is opened.
Although I am using elementor in Wordpress on the website, but custom CSS or JS works for me as well.
Highly appreciate any help.
My application gives users a specific amount of time to pay for a service. We do this because we can only keep their reservation for X amount of time.
The time we give them should be sufficient, however if they are running out of time we notify them with a Bootstrap Modal as shown below:
However, as soon as the modal achieves focus by the user clicking on the button or anywhere on the modal window, the PayPal browser window moves behind the main window. See picture below.
Simple clicking anywhere on the black overlay will bring the Paypal browser window back. However, I was hoping that someone might have some idea on how to achieve this using the button click in the modal.
In other words, how can I bring the Paypal browser window back to the front by clicking on the 'Yes Please' button on the modal or the close event of the modal?
I have tried to simulate the clicking of the overlay element in code but it does not seem to work.
Here is the code of the page:
From what I have read because the PopUp browser window is being opened from an iframe and the content is from a different source I cannot access the popup for security reasons. So there is no way to move it to the front unless the user clicks the dark overlay or the link 'Click to Continue'
I have read this SO Thread and applied the code to my pages and it works well.
However, I have the page help details displayed in a bootstrap modal. When the user clicks on the page help icon, the bootstrap modal opens and displays the help details. I have a "top" button on the bootstrap modal help so that the user can scroll to the top of the bootstrap modal help "page".
The issue I have is that the scroll up to the top of the bootstrap modal help "page" does not occur. Instead, the actual page that the bootstrap modal was initiated from scrolls up.
How do I amend my code so that the scrolling effect will occur on the bootstrap modal?
Here is my js code:
function goToByScrollHelp(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
Here is my html code link:
<a id="id_top_of_help"></a>
The issue I'm having is that when a modal is opened, the background body is scrollable using the mouse wheel.
Seems like this problem is known and people have suggested to set the body to overflow:hidden as stated in this link:
Prevent BODY from scrolling when a modal is opened
which works fine if your page is short and the modal link is on the initial visible page. However, if you have a longer page and you have to scroll down to see the modal link, once you click to open the modal, the background body shifts to the top.
The background does not scroll anymore, which is what I want, but is there any way to prevent it from popping back to the top when the modal is opened? It's inconvenient when you need to add multiple entries of something using the modal and you have to keep scrolling down to click the modal link to add another item.
In your onclick(I'm guessing you use onclick) event-method insert a return false; at the end, that will prevent the site from scrolling to the top.
I was having a similar problem in which modals larger than the window were cut off, and scrolling anywhere would scroll the background and not the modal.
This question pointed me to this plugin which is simple to use and fully addresses mine in addition to your problem of not permitting the background to scroll:
However this issue is said to be resolved in Bootstrap 3 and the plugin should not be needed if you're using the current version of Bootstrap.
I am currently using a Jquery ui modal box.
When I am slightly scrolled down the page and click on the link to open the Modal box the box should open in the middle of the page, the modal opens in the correct position but makes the page scroll to the top making it look like the modal is opening at the bottom of the page.
this is the code i am using to open the modal
$("#lightboxOne").click(function(){
$("#example").dialog();
return false;
});
And here is a the test url for the problem
http://satbulsara.com/NSJ-LOCAL-02-06/eqs1.htm
the link to open the dialogue is called Show the Dialog
How can this be fixed?
Thanks,
Sat
After hours ripping out the lightbox i found it was a hidden div