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();
})
Related
I'm trying to make a bootstrap modal draggable anywhere on the page and when the modal is open, I want the user to be able to continue using the page.
I was able to make the modal draggable with jquery-ui but I'm stuck on making the page usable while the modal is open. Tried several suggestions with CSS but none work quite as I'd like them to.
This makes the page usable but the modal is limited to only a part of the page: Bootstrap Modal - make background clickable without closing out modal
Same as this one: Enable background when open bootstrap modal popup
Is it possible to achieve this with bootstrap modal at all?
This is my JS:
$('#btn1').click(function() {
var modalDiv = $('#myModal');
modalDiv.modal({backdrop: false, show: true});
$('.modal-dialog').draggable({
handle: ".modal-header"
});
});
JSFiddle link: https://jsfiddle.net/ntLpg6hw/1/
This is really cool!
I think all you need is a little css.
#myModal {
position: relative;
}
.modal-dialog {
position: fixed;
width: 100%;
margin: 0;
padding: 10px;
}
You should also add some jQuery to reset your modal position on button click.
$('#btn1').click(function() {
// reset modal if it isn't visible
if (!($('.modal.in').length)) {
$('.modal-dialog').css({
top: 0,
left: 0
});
}
$('#myModal').modal({
backdrop: false,
show: true
});
$('.modal-dialog').draggable({
handle: ".modal-header"
});
});
Check out the Fiddle
Note: Facebook is now doing something similar with external newsfeed videos. If you scroll away from a video while watching it, it becomes a drag and drop video.
Basically, their video popup parent container is position: relative, and the direct child of that container is position: fixed. The same strategy is used here.
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;
}
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 am using Bootstrap for css and I need help in fading out a div when the class 'hidden' is toggled.
My site structure is pretty simple: there are 3 main container divs: search, wait and show. Essentially, show is the lowest positioned one, wait is on top of show and search is at the very top.
All I need is for search to fade out over 3 seconds when this Jquery event is fired:
$('.search').toggleClass('hidden');
I don't want it to just instantly disappear. Same with the wait div. I have tried using
$(".searchBar").fadeOut("slow", function() {
$('.searchBar').toggleClass('hidden');
});
But it doesn't work. The fadeout/fadein don't seem to have any visible effect. Since the hidden class is already in bootstrap, I do not want to create another custom one; there's got to be a way to accomplish this.
Bootstrap hidden class is:
.hidden {
display: none;
visibility: hidden;
}
You can easily achieve this:
$('.searchBar').toggle( "slow");
Use something like this:
$(".searchBar").fadeOut("slow", function() {
$('.searchBar').addClass('hidden').show(0);
});
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);
});