I have a small problem with my modal window and for some reason I can't figure this out.
On mobile, I have a hamburger menu and in that menu I have a Log In link which open a modal window.
Everything works and the modal is showing but the problem is: the dropdown menu is showing on top of my modal.
I tried to hide it using:
$(document).ready(function() {
var modal = $('.modal'); //get modal window
if(modal.hasClass("in")){ //check if it has class "in"
$('.navbar-toggleable-md').hide(); //true, hide navbar
}
}); // end ready
What am I missing? Because the code from above it's not doing anything..
You need to catch an event either show.bs.modal or shown.bs.modal on .modal. Something like this:
$(document).ready(function() {
$('.modal').on('shown.bs.modal', function (e) {
$('.navbar-toggleable-md').hide();
});
});
Read bootstrap docs: modals-events
I think there is a problem with z-index on our model. increase the z-index of your modal.
OR please provide us with fiddle of your code.
Set the z-index of your modal greater than the z-index of the dropdown.
In example:
.modal {
z-index: 999;
}
.dropdown {
z-index: 99;
}
Related
I´m using DataTables on a Bootstrap modal window, and when I implement the RowReorder Extension works fine, except that the row following the mouse pointer occurs behind the modal. Is there a way to set that up so I can see the row moving in front of the screen over the modal window? Something like z-order or so? Thank you very much in advance.
By default a bootstrap .modal have z-index: 1050 and the .modal-backdrop a z-index: 1040. So all you have to do is to ensure the z-index for the RowReorder floating element has a higher rank :
table.dt-rowReorder-float {
z-index: 2000;
}
demo -> http://jsfiddle.net/L82z0jgj/
I have multiple modal window and inside have slick.js sliders. The problem is that the slider doesn't show up as if it doesn't have any height and you have to wait for awhile or click on the bullets for the image to show up.
One solution I got was to add a resize() when the modal is shown:
$('.modal').on('shown.bs.modal', function (e) {
$('.carousel').resize();
})
But this only solves the issue for one modal window's slider. If you click on the other modal, the slider will not show up again. Here's a js fiddle:
http://jsfiddle.net/vanduzled/nv446jgm/2/
I managed to get this to work with multiple modal windows with the following:
$('.modal').on('shown.bs.modal', function (e) {
$('.product-slider').slick("setPosition", 0);
});
above solution also worked but it not smooth try this it work like charm
.modal {
display: block;
visibility: hidden;
overflow-y: hidden;
}
.modal.in {
visibility: visible;
}
Hey man i think your solution is actually a very good one.
I changed it slightly, so i apply the slick carousel when the modal is shown:
$('.modal').on('shown.bs.modal', function (e) {
$('.carousel').slick();
})
I have a button, once I click on that button bootstrap modal will appear and then intro.js should highlight that modal. This is my requirement. But it's not working like that.
Once I click on that button modal is appearing but intro.js is not highlighting, if I press F12 it's highlighting.
This is the code I've written:
var introInstance=introJs();
introInstance.onbeforechange(function(targetObj) {
switch(targetElementIndex){
case 1:
$('#productPlanDiv').modal();
break;
};
});
How can I fix this? Thanks.
The answer here and the answer #Victor gave could help you to solve this problem. But these two answers didn't solve my problem so I merged them.
But there are several issues for these answer to mention that I think is important;
As #Victor mentioned, introJs and DOM have to use same div. But you should use assing introJs to modal div only when you actually want to show modal. Let's think you have 4 steps and and 3rd and 4th steps show your modal's elements as follow:
HTML code:
<html>
<style>
.modal {
z-index: 999999997 !important;
}
.modal .introjs-fixedTooltip {
z-index: 99999998 !important; /*I give less value to this one. The other way introJs always blocks my modals*/
}
.modal .introjs-showElement {
z-index: 999999999 !important;
}
</style>
<body>
<div id="some-div" data-step="1" data-intro="Let's do this!">
<p>some meaningful workk</p>
</div>
<div id="some-other-div" data-step="2" data-intro="You can do it!">
<p>this is very important text</p>
</div>
<div id="yourmodal" class="modal fade" role="dialog" aria-hidden="true">ü
<form id="valuable-info" data-step="3" data-intro="use here to give info">
important labels, textboxs, lists etc...
<button id="click-here" data-step="4" data-intro="click here to click">
click
<button>
</form>
</div>
<button id="introJs-button">IntroJS</button>
</body>
JS code:
$('#introJs-button').on('click', function() {
var intro = introJs();
intro.onchange(function (targetElement){
if (targetElement.attributes["data-step"].value === "3" && targetElement.attributes["data-step"].value === "4") {
var closestContainer = $(targetElement).closest('div.modal').prop('id');
$('.introjs-overlay, .introjs-helperLayer, .introjs-tooltipReferenceLayer, .introjs-fixedTooltip').appendTo('#' + closestContainer);
}
else {
$('.introjs-overlay, .introjs-helperLayer, .introjs-tooltipReferenceLayer, .introjs-fixedTooltip').appendTo('body');
}
});
})
Like I tried to show in my JavaScript code, you should only append introJs to modal when your data-steps are defined at your modal's div. The other way, introJs will always tries to append itself to the closest container and when find nothing, it will cause error/bugs.
The other important thing I encounter is when you give your modal a high z-index value you should also give your modal's item such as select2-dropdownlist higher z-index value. Or you should reset modal's z-index value. Some of the items in select2-dropdownlist like select2-search__field, select2-results__options etc. will not understand what z-index value you give to modal. And because their z-index value will be lower than the modal itself these items never be shown on modal. My suggestion is resetting modal z-index value to prevent this.
Since all JavaScript plugins in bootstrap require jQuery you can use an event listener to trigger it automatically when the modal is shown:
$('#my-modal').on('shown', function(){
introJs().start();
});
None of the solutions on the web have fixed the problem for me.
But I came up with this solution:
/*fix interactions with modal BS3, take this on CSS file*/
.modal { z-index:999999997 !important; }
.modal .introjs-fixedTooltip { z-index: 999999998 !important; }
.modal .introjs-showElement { z-index: 999999999 !important; }
//Use this class and make sure that the modal has an ID
//introJs-Bs3-modal
//The introJs have a problem with DOM positioning and reading. It is mandatory for DIVs to work within the same element as modal.
$('.introJs-Bs3-modal').on('click', function() {
var containerClosest = $(this).closest('div.modal').prop('id');
setTimeout(function(){
$('.introjs-overlay, .introjs-helperLayer, .introjs-tooltipReferenceLayer').appendTo('#'+containerClosest);
}, 0);
});
You can see the issue at http://bmuller.com/index_new.html. Clicking on a location name brings up a home "button" in the bottom left. Clicking that home button returns to the original page load layout, and is supposed to hide the home button. However, as soon as the cursor is moved off the home button, it reappears and returns to its hover behavior (separately defined).
html:
<div id="home">Home</div>
JS:
function nav_click() {
$('.navitem').click(function(){
...
$('#home').fadeTo(200,0.5);
...
});
}
$(document).ready(function(){
nav_click();
$('#home').hover(
function() {
$('#home').fadeTo(100,1)
},
function() {
$('#home').fadeTo(100,0.5)
}
);
$('#home').click(function(){
$('html').removeAttr('style');
$('#navbar').removeAttr('style');
$('.navdate').removeAttr('style');
$('.navitem').fadeIn(200);
$('#pagebrand').fadeIn(200);
$('.arrow').removeAttr('style');
$('#home').hide();
nav_hover();
nav_click();
});
});
Let me know if you need to see more code to answer this. And feel free to tell me why anything else looks wrong/dumb too.
Thanks!
If you put a breakpoint in the last part of #home.click(), you see that it is hidden. Before continuing, you can move the mouse outside the screen and the button is hidden. Put another breakpoint near $('#home').fadeTo(100,0.5)} and you see it gets invoked when your mouse hovers the page, which will thus automatically make the home button appear. Inspecting jQuery it appears to be on mouseout, probably part of the hover mechanism.
As suggested in the comments, use more CSS instead of JS.
See if this gets you started:
#home, .navitem {
cursor: pointer;
}
#home {
opacity: 0.5;
-webkit-transition: opacity linear 100ms;
}
#home:hover {
opacity: 1;
}
#navbar.docked {
top: auto;
left: 0px;
....
}
JS
function attach_nav() {
$('.navitem').click(function(){
$('#navbar').addClass('docked');
});
First of all I think you could do the hover thing via css.
If you want to keep the jquery hover function then you have to unbind the mouseleave event within your click event or simply add a 'clicked' class to the element.
For the 2nd approach I made a little jsfiddy
Making the home button visible by clicking on .navitem (in fiddle called .clickme)
$('.clickme').on('click', function (e) {
e.preventDefault();
$('.menu').removeClass('clicked').show();
});
On click hide the menu again and add a class 'clicked'
$('.menu').on('click', function (e) {
e.preventDefault();
$(this).attr('style', '');
$(this).addClass('clicked').hide();
});
On hover check if its clicked:
if (!$(this).hasClass('clicked'))...
Is there a way to make it so that when the navigation shrinks down all or any of the drop down menus are expanded? thus when the user touches the navigation and it drops down all the drop down navigation items are already fully expanded?
I assumed this was a default behaviour but this seems to not be the case for me.
Instead my navigation looks as such:
I had to hover over Menu item to get that secondary menu. Is there a way to have this and all other drop down menus already expanded?
It was only starting in version 2.2 that the behavior you want was replaced by the current behavior of having dropdowns be collapsed/collapsible in a collapsible navbar.
I threw together the following workaround, which seems to do the trick:
$('.nav-collapse').on('show', function (e) {
var $dropdowns = $(this).find('.dropdown');
setTimeout(function () {
$dropdowns.addClass('open')
});
});
The reason for the setTimeout is because otherwise the original click event which triggered opening the navbar will end up closing the dropdowns again when it propagates up to the <html> element.
The correct answer to fix this is to do the following: Which is seen here.
#media (max-width: 980px) {
.dropdown ul.dropdown-menu {
display: block;
}
}
This is for version 2.2.2