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>
Related
I have a problem. I made a custom Pop-up using elementor and now added a custom jQuery code for the pop-up menu to close on the menu-item click. I have ordered the Elementor to open via action in elementor and close via the code. Picture of elementor action for popup
The code is following.
<script>
jQuery(function($){
$(document).on('click','.elementor-location-popup .menu-item', function(event){
elementorProFrontend.modules.popup.closePopup({}, event );
});
});
</script>
The problem is, that every click on different elements on the page, for example the admin bar, the contact form etc, the popup opens, event though not ordered to do so.
Has anyone had the same issue with elementor popup?
Has it something to do with the jQuery document value? Or should I seek help from elementor?
Got the fix. It is an Elementor bug.. They still have not fixed it, even with the latest update. The issue was not with jQuery code, but with Elementor settings.
I had to eliminate all the popup conditions and triggers from elementor side and just use a dynamic elementor button opening and jQuery button closing.
Somehow the triggers produced the bug, that opened the popup on a random page click.
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?
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.
When I initialize and show bootstrap modal dialog, all elements on the page behind the dialog and expose mask are still reachable by tab navigation.
Here on official Bootstrap page that is not the case. There is no any specific code for this, just simple modal show.
Any ideas how to disable tabbing behind the modal?
Consider migrating to Bootstrap 3, where this is not an issue.
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