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
Related
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?
I am building a web widget that opens a modal window. The window opens as expected when the trigger link is at the top of the page. But when the trigger is at the bottom of a long page (that requires scrolling), the modal window is clipped/truncated above the viewing area.
Regardless of where the modal window is triggered, the HTML is appended to the body of the page, so I don't understand what's causing the issue.
I would appreciate some help.
js code: https://textfilter.me/widget.js
example / demo : https://textfilter.me/privacy/
It's not javascript. It's css. In this case change position:absolute to position: fixed in modal class. voila.
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>
We have html page with a pop up that gets opened on button click. Both html page and pop up have scroll bar for them.
I want pop up window to scroll down on click of a button that is inside the pop up.
I am doing:
$(window).scrollTop($('#suggestDetails').offset().top);
The element #suggestDetails is inside the pop up but the main html page scroll bar gets down on button click and not the pop up scroll bar.
Any idea how to move down scroll bar/screen inside the pop up?
You need to scroll the popup/modal, not the window.
$('#yourmodal-id').scrollTop($('#suggestDetails').offset().top);
I am using JQuery dialog to display dialog box on my page. When i click on button JQuery Dialog pops up but it enables browsers scrollbars too. My default page does not show scrollbars it shows only when JQuery dialog opens. Do i need to set any dialog property to disable web page resizing when showing dialog in order to avoid showing scrollbars when JQuery Dialog opens?
Sounds like your dialog is bigger than the browser window.
Does it matter that scrollbars appear?
You could use the CCS3 property
html {overflow-y: scroll;}
To always show the scrollbar so the page doesn't jump about.