I have a page with a modal with a lot of info so you need to scroll. This modal contains a link to a second modal.
When I
open modal 1
click on link to open modal 2 (modal 1 stays in background)
and then close modal 2 so that I am back on modal 1
modal 1 looses scrolling (there is still a scroll bar but it doesn't do anything). Instead the modal stays in the position it was at the time of opening modal 2.
I played around with closing the background modal with js first (but that messes up scrolling on the second modal). It appears that every time I try to open/close more than one modal I always get some issue with the scrolling.
Any suggestions on how to handle this?
Add
.modal { overflow: auto !important; }
To your CCS.
Without your code I went ahead and created this jsFiddle that recreates your issue, or at least a very similar one. Add your code and I will test if this works or not.
Adding that line to the CSS fixed the issue as demonstrated with this jsFiddle.
Solution taken from this thread on github which offers other solutions as well.
The solution that worked for me was:
$('.modal').on("hidden.bs.modal", function (e) {
if ($('.modal:visible').length) {
$('body').addClass('modal-open');
}
});
$(document).on('hidden.bs.modal', '.modal', function () {
$('.modal:visible').length && $(document.body).addClass('modal-open');
});
this is the solution:
<script>
$('#id_ofyou_secondary_modal').on('hidden.bs.modal', function (e) {
$('body').addClass('modal-open');
});
</script>
take care that "#idofyousecondarymodal" is the id of the secondary or tertiary or infinite modal. but NEVER write the ID of the first modal.
example i have 2 modal:
<div id="mymodal1" class="modal fade in" style="display:none;">
.
.
.
.
</div>
<div id="mymodal2" class="modal fade in" style="display:none;">
.
.
.
.
</div>
then the script will be:
<script>
$('#mymodal2').on('hidden.bs.modal', function (e) {
$('body').addClass('modal-open');
});
</script>
jus add this code and work fine.
I tried the previous solutions, and not working for my use case:
just adding css .modal { overflow: auto !important; }
This will cause the content below modal become scrollable. Not good when you want to keep the previous content position. especially in mobile browser.
Use javascript to track opened modal and keep the 'modal-open' class in body element using this jQuery selector $('.modal:visible').length. This is not working when there are multiple modal opened and closed fast. I use BS modal for my ajax spinner, so the $('.modal:visible') is not accurate.
This is the working one for me:
Use JS global variable to keep track/count of opened modal; instead of just using :visible selector
And I added css style so I don't have to recalculate backdrop z-index
https://stackoverflow.com/a/63473738/423356
var bootstrapModalCounter = 0; //counter is better then using visible selector
$(document).ready(function () {
$('.modal').on("hidden.bs.modal", function (e) {
--bootstrapModalCounter;
if (bootstrapModalCounter > 0) {
//don't need to recalculate backdrop z-index; already handled by css
//$('.modal-backdrop').first().css('z-index', parseInt($('.modal:visible').last().css('z-index')) - 10);
$('body').addClass('modal-open');
}
}).on("show.bs.modal", function (e) {
++bootstrapModalCounter;
//don't need to recalculate backdrop z-index; already handled by css
});
});
.modal {
/*simple fix for multiple bootstrap modal backdrop issue:
don't need to recalculate backdrop z-index;
https://stackoverflow.com/questions/19305821/multiple-modals-overlay/21816777 */
background: rgba(0, 0, 0, 0.5);
}
This is modified fiddle from #Keeleon for the fix https://jsfiddle.net/4m68uys7/
This is github issue https://github.com/nakupanda/bootstrap3-dialog/issues/70
Add following to your CSS :
.modal
{
overflow: scroll !important;
}
Related
I want my body to stop scrolling to top when I am trying to open popup modals. I am using both angular material and ng-bootstrap popup modals.
I've tried the piece of CSS code below, but the issue is still there, please help.
body.modal-open {
overflow: hidden;
position: fixed;
}
From what I read here here the position of the modal is set to default at the top. To completely remove the scrolling, use that to position the modal down. If you just want to be at the same position after the modal close, you can use this which I used from the comments: here
openModal() {
// Remember the current scroll position
let pos = (document.documentElement.scrollTop || document.body.scrollTop);
this.bsModalRef = this.modalService.show(ModalComponent);
this.modalHideSubscription = this.modalService.onHide.subscribe(() => {
//Return back to the position before opening modal
window.scrollTo(0,pos);
this.modalHideSubscription.unsubscribe();
});
}
I am trying to properly implement a push-side menu plugin (Responsive Menu) into a wordpress theme. Based on SO #Congrim answer, I've managed to achieve a way to lock the body at scroll when push-menu is open (with all the elements including the header fixed) except the interactive links class=edge-ils edge-ils-with-scroll edge-ils-light which will still go Up at push-menu open.
I've saved this sequence into congrim.js file, I've enqueued the script into the theme in functions.php file:
function lockScroll() {
if ($('body').hasClass('lock-scroll')) {
$('body').removeClass('lock-scroll');
}
else {
$('body').addClass('lock-scroll');
}
}
/* I've implemented `onclick="lockScroll();"` in button element,
* using this sequence in the same congrim.js file:
*/
$(document).ready(function() {
$('#responsive-menu-pro-button').click(function() {
lockScroll();
});
});
Removing the jQuery wrap will not give any error in browser console (tested in Chrome) may be still a bad approach to wrapp the code like this in wordpress (?)
In these conditions, unfortunately, overflow: hidden; doesn't apply, at push-side menu open, I can't use this class in CSS file/section:
.lock-scroll {
overflow: hidden;
}
The code will allow me to use only
.lock-scroll {
position: fixed;
}
The question:
Is there any possibility to force the code to implement overflow: hidden;* OR any other a workaround in order to have the interactive links class=edge-ils edge-ils-with-scroll edge-ils-light not going up at push-side menu open, to remain fixed at the position the viewer is clicked before opening the menu?
Please focus on the interactive links issue only, the rest of the scene is fine (header and the logo are in place like it should be, the background pictures are acting like it should as well).
LE: *overflow: hidden; it looks like will produce an unwanted body shifting effect at menu open/close, during the show/hide scrollbar, which is not happening in this stage.
LE2: congrim.js file has been replaced with body-lock.min.js by Outsource WordPress, please see the solution below.
Website testpage here.
Please check the solution given below.
Step 1: Add this CSS .scroll-lock{position:fixed !important;}.
Step 2: Add this JS.
$(document).ready(function() {
var windowTop = 0;
var menuOpen = 0;
var offsetContainerList = 0;
$('#responsive-menu-pro-button').click(function() {
var offsetScrollList = $('.edge-ils-item-link:first').offset().top;
if ($('html').hasClass('scroll-lock')) {
$('#responsive-menu-pro-container').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
function(event) {
if (menuOpen==0) {
menuOpen = 1;
$('html').removeClass('scroll-lock');
$('.edge-ils-content-table').css('top', eval(offsetContainerList)-40+'px'); //change image container top position
$('html').scrollTop(windowTop); //scroll to original position
}
else {
menuOpen = 0;
}
});
}
else {
windowTop = $(window).scrollTop();
offsetContainerList = $('.edge-ils-content-table').offset().top;
$('html').addClass('scroll-lock');
$('.edge-ils-content-table').css('top', -offsetScrollList + 'px'); //change image container top position
}
});
});
That's it!
Please add the below code in your custom js file .
jQuery('#responsive-menu-pro-button').click(function(){
var menu_active = jQuery(this).hasClass('is-active');
if(menu_active){
jQuery('body').css('position','fixed');
}else{
jQuery('body').css('position','static');
}
});
I hope it helps you.
Thanks
Your scroll isn't a natural navigator-based scroll, you have a JS somewhere swapping classes to emulate a scroll (edge-appeared,edge-up,edge-down).
On the push-side menu opening, these classes are reset, overflow-hidden won't change that.
You need to find which JavaScript is swapping those classes and prevent it from doing so, I'd be glad to be of further help but you have so many JS files that it would take quite some time to go through all of these. If you succeed in making a Minimal, Complete, and Verifiable example please post it here.
I would like the slideshow to be collapsed by default. Right now when going to this page http://dev-caal.gotpantheon.com/membership we can see the slideshows for a split second and it then slides up. I would like it to be collapsed by default.
This is the js code:
$(document).ready(function(){
$('.jcarousel-clip').slideUp();
$(".jcarousel-prev, .jcarousel-next").hide();
$('.updown3').click(function() {
$('.jcarousel-clip ').slideToggle(300, function() {
$('.updown3').toggleClass('arrow-up');
$(".jcarousel-prev, .jcarousel-next").toggle();
return false;
});
});});
Render it off the page, collapse it, then inject it into the area you would like
or you can try doing element.hide().slideUp(function(){this.show();});
You can add a display: none to .jcarousel in your css file and only show it afterwards.
I'm trying to integrate jakiestfu's Snap.js with Twitter Bootstrap.
I've got something that functions (I can get the content to slide, or open a drawer via a click event). However, I'm at the limit of my CSS skills for the final problem: The drawer content is always visible regardless of the state of the drawer.
JSFiddle example
While I could hard-code the visibility of the drawer element on document load and do something on the open/close click event, that doesn't do anything for the drag capability that Snap.js has.
addEvent(document.getElementById('open-left'), 'click', function () {
// Muck with visibility in here
// Added code sample because StackOverflow wants it with a fiddle...
if (snapper.state().state == "left") {
snapper.close();
} else {
snapper.open('left');
}});
You need to setup a background color for your content:
#content{
background: white;
}
Working fiddle: http://jsfiddle.net/basarat/ygm3L/
Quite simply, I want to know how I can do this 'http://www.lido-troon.co.uk/'.
Where it says 'Reserve a table'. This trigger allows a drop down interface to animate as if from above.
I'm not interested in the booking system in there, just the functionality.
I thought it could be done using anchors and smooth scroll, but that would mean the booking form was always there.
I will give you a code that will center this div on the top of the screen on every screen and will slide the div down from the top onLoad:
HTML:
<div id="ID_NAME">Your Content</div>
JQuery:
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top","-100px");
this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");return this;
}
$(document).ready(function(){
$('#ID_NAME').center().delay(300).animate({'top' : '0px'});
});
Hope this helped
Create the content and then show it using JQuery:
http://api.jquery.com/show/
You can have the top div with your booking system content hidden with jQuery's hide() than on .click() of the button (a tag), have it slideDown()
Example:
$(document).ready(function() {
$('booking_div').hide();
$('booking_a').click(function() {
$('booking_div').slideDown();
});
});
You can use javascript, Jquery. that have many UI effect. It's good and easy to use. You can learning it from document. e.g. http://www.webdesignersblog.net/coding/20-advanced-jquery-effects/ http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
Yes you can,
create div at the top of your page with the style="display: none;" or set class with the css from style attribute. Then attach event click to your link and animate change.
JavaScript
$('#your_link_button').click(function()
{
$("#container").slideToggle('slow');
});
CSS
.hidden { display: none; }
HTML
<body>
<div id="container" class="hidden">your content</div>
...