How to highlight bootstrap modal with intro.js - javascript

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);
});

Related

Bootstrap 3.4 on Shopify Debut Theme. Refusing to set backdrop to transparent [duplicate]

When creating a modal in twitter bootstrap, is there any way to change the background color? Remove the shading entirely?
NB: For removing shading, this doesn't work, because it also changes the click behavior. (I still want to be able to click outside the modal to close it.)
$("#myModal").modal({
backdrop: false
});
To change the color via:
CSS
Put these styles in your stylesheet after the bootstrap styles:
.modal-backdrop {
background-color: red;
}
Less
Changes the bootstrap-variables to:
#modal-backdrop-bg: red;
Source
Sass
Changes the bootstrap-variables to:
$modal-backdrop-bg: red;
Source
Bootstrap-Customizer
Change #modal-backdrop-bg to your desired color:
getbootstrap.com/customize/
You can also remove the backdrop via Javascript or by setting the color to transparent.
If you want to change the background color of the backdrop for a specific modal, you can access the backdrop element in this way:
$('#myModal').data('bs.modal').$backdrop
Then you can change any css property via .css jquery function. In particular, with background:
$('#myModal').data('bs.modal').$backdrop.css('background-color','orange')
Note that $('#myModal') has to be initialized, otherwise $backdrop is going to be null. Same applies to bs.modal data element.
CSS
If this doesn't work:
.modal-backdrop {
background-color: red;
}
try this:
.modal {
background-color: red !important;
}
remove bootstrap modal background try this one
.modal-backdrop {
background: none;
}
It gets a little bit more complicated if you want to add the background to a specific modal. One way of solving that is to add and call something like this function instead of showing the modal directly:
function showModal(selector) {
$(selector).modal('show');
$('.modal-backdrop').addClass('background-backdrop');
}
Any css can then be applied to the background-backdrop class.
Add the following CSS;
.modal .modal-dialog .modal-content{ background-color: #d4c484; }
<div class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
...
...
For Bootstrap 4 you may have to use .modal-backdrop.show and play around with !important flag on both background-color and opacity.
E.g.
.modal-backdrop.show {
background-color: #f00;
opacity: 0.75;
}
If you need to remove shading for only one type of modal windows, you can simply add ID to your modal window
<div class="modal fade" id="myModal">...</div>
and in you css file add the following
#myModal .modal-backdrop {background-color: transparent;}
If you need to remove shading for all modal windows, just skip the step with assigning ID.
I used couple of hours trying to figure how to remove background from launched modal, so far tried
.modal-backdrop { background: none; }
Didn't work
even I have tried to work with javascript like
<script type="text/javascript">
$('#modal-id').on('shown.bs.modal', function () {
$(".modal-backdrop.in").hide(); })
</script>
Also didn't work either.
I just added
data-backdrop="false"
to
<div class="modal fade" id="myModal" data-backdrop="false">......</div>
And Applying css CLASS
.modal { background-color: transparent !important; }
Now its working like a charm
This worked with Bootstrap 3
For Angular(7+) Project:
::ng-deep .modal-backdrop.show {
opacity: 0.7 !important;
}
Otherwise you can use:
.modal-backdrop.show {
opacity: 0.7 !important;
}
When modal appears, it will trigger event show.bs.modal before appearing. I tried at Safari 13.1.2 on MacOS 10.15.6. When show.bs.modal event triggered, the .modal-backgrop is not inserted into body yet.
So, I give up to addClass, and removeClass to .modal-backdrop dynamically.
After viewing a lot articles on the Internet, I found a code snippet. It addClass and removeClass to the body, which is the parent of .modal-backdrop, when show.bs.modal and hide.bs.modal events triggered.
ps: I use Bootstrap 4.5.
CSS
// In order to addClass/removeClass on the `body`. The parent of `.modal-backdrop`
.no-modal-bg .modal-backdrop {
background: none;
}
Javascript
$('#myModalId').on('show.bs.modal', function(e) {
$('body').addClass('no-modal-bg');
}).on('hidden.bs.modal', function(e) {
// 'hide.bs.modal' or 'hidden.bs.modal', depends on your needs.
$('body').removeClass('no-modal-bg');
});
References
The code snippet after google
Bootstrap 4.5, modal, #events
Bootstrap 4.5 documents
$(".modal").on('shown.bs.modal', function() {
$('.modal-backdrop').css('background', '#00000073');
});

Hide dropdown when modal is showing

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;
}

CSS riddle, can't figure how to modify piece of code

http://fiddle.jshell.net/ycc7anhy/1/show/
Here is live code. Its CSS dialog box.
Problem is, its beign show by:
Modal!
By a href element, and I can't figure out how to change it to for example javascript onclick or any other method (couple would be appreciated).
Probably this css have to do smth with it:
.modal:target:before {
display: block;
}
.modal:target {
position: absolute;
top: 0;
}
First, your HTML code should look like this
<a onclick="toggle-modal('#mymodal')" > OPEN MODAL </a>
<div Id="mymodal" > your modal content </div>
By default, your modal is hidden ( display none, or opacity 0) . Then with a JavaScript function you show the modal.
I prefer use JQuery with JavaScript but you can do it with pure JavaScript.
Function toggle-modal(modalID){
$('#mymodal').classList.toggle('active'); }
The CSS class active displays the modal ( display:block ) or set its opacity to 1.

jQuery Traversing and simple code?

Okay, before I ask this question. Let me explain my goal: I want to write as little code as possible, and still be able to have tons of functionality at the same time. I have coined this as 'beautiful code' to myself and colleagues.
Here's the problem: I want to click a box, and a panel to fade in with the desired content based on which box I clicked. Except that I cant use two classes and cannot re-use id's.
Here's the code: http://jsfiddle.net/2Yr67/
$('.maingrid').click(function(){
//'maingrid' fade out
//'panel' fade in with proper content
});
I had two ideas that would please me.
A) Have one panel fade in, and content fill into the panel based on which 'maingrid' box that was 'click'ed
B) Have a specific panel with the content fade in, based on which 'maingrid' was selected
I'm not asking for you to do it for me, simply push me towards the syntax needed to do what I want
Thanks in advance!
The first thing to do is to move your panel HTML elements closer to the maingrid elements. This allows you to hide/show the correct elements in order. Having all of the panels in their own separate element causes you to do DOM manipulation should shouldn't need to do. For simplicity, I put each panel right after the maingrid element that it was associated with it.
HTML Structure
<div class=".mainContainer">
<div class='maingrid'></div>
<div class='panel'></div>
<div class='maingrid'></div>
<div class='panel'></div>
<div class='maingrid'></div>
<div class='panel'></div>
<div class='maingrid'></div>
<div class='panel'></div>
</div>
I added the panel class to have the same CSS as maingrid, as well as make it invisible at the start:
.maingrid, .panel {
height: 345px;
width: 345px;
float: left;
/* [disabled]background-color: #000; */
margin-top: 5px;
margin-right: 5px;
cursor: pointer;
overflow: hidden;
}
.panel{
display:none;
color:white;
}
This will fade out the current element clicked and fade in the next panel element.
$('.maingrid').click(function(){
var $that = $(this);
$(this).fadeOut(function(){ //This will wait until the fadeOut is done before attempting to fadeIn.
$that.next().fadeIn();
});
});
$('.panel').click(function(){
var $that = $(this);
$(this).fadeOut(function(){
$that.prev().fadeIn();
});
});
There also seems to be a bug where the hover does not show the text on the first hover event.
JSFiddle: http://jsfiddle.net/mDJfE/

How to resize Twitter Bootstrap modal dynamically based on the content

I have database content which has different types of data, such as Youtube videos, Vimeo videos, text, Imgur pictures, etc. All of them have different heights and widths. All I have found while searching the Internet is changing the size to only one parameter. It has to be same as the content in the popup.
This is my HTML code. I also use Ajax to call the content.
<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="ModalLabel"></h3>
</div>
<div class="modal-body">
</div>
</div>
This worked for me, none of the above worked.
.modal-dialog{
position: relative;
display: table; /* This is important */
overflow-y: auto;
overflow-x: auto;
width: auto;
min-width: 300px;
}
Since your content must be dynamic you can set the css properties of the modal dynamically on show event of the modal which will re-size the modal overriding its default specs. Reason being bootstrap applies a max-height to the modal body with the css rule as below:
.modal-body {
position: relative;
overflow-y: auto;
max-height: 400px;
padding: 15px;
}
So you can add inline styles dynamically using jquery css method:
For newer versions of bootstrap use show.bs.modal
$('#modal').on('show.bs.modal', function () {
$(this).find('.modal-body').css({
width:'auto', //probably not needed
height:'auto', //probably not needed
'max-height':'100%'
});
});
For older versions of bootstrap use show
$('#modal').on('show', function () {
$(this).find('.modal-body').css({
width:'auto', //probably not needed
height:'auto', //probably not needed
'max-height':'100%'
});
});
or use a css rule to override:
.autoModal.modal .modal-body{
max-height: 100%;
}
and add this class autoModal to your target modals.
Change the content dynamically in the fiddle, you will see the modal getting resized accordingly. Demo
Newer version of bootstrap see the available event names.
show.bs.modal This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
shown.bs.modal This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
hide.bs.modal This event is fired immediately when the hide instance method has been called.
hidden.bs.modal This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
loaded.bs.modal This event is fired when the modal has loaded content using the remote option.
Older version of bootstrap modal events supported.
Show - This event fires immediately when the show instance method is called.
shown - This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).
hide - This event is fired immediately when the hide instance method has been called.
hidden - This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).
I couldn't get PSL's answer working for me so I found all I have to do is set the div holding the modal content with style="display: table;". The modal content itself says how big it wants to be and the modal accommodates it.
There are many ways to do this if you want to write css then add following
.modal-dialog{
display: table
}
In case if you want to add inline
<div class="modal-dialog" style="display:table;">
//enter code here
</div>
Don't add display:table; to modal-content class. it done your job but disposition your modal for large size see following screenshots.
first image is if you add style to modal-dialog
if you add style to modal-content. it looks dispositioned.
for bootstrap 3 use like
$('#myModal').on('hidden.bs.modal', function () {
// do something…
})
Simple Css work for me
.modal-dialog {
max-width : 100% ;
}
I simply override the css:
.modal-dialog {
max-width: 1000px;
}
set width:fit-content on the modal div.
You can do that if you use jquery dialog plugin from gijgo.com and set the width to auto.
$("#dialog").dialog({
uiLibrary: 'bootstrap',
width: 'auto'
});
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="http://code.gijgo.com/1.0.0/css/gijgo.css" rel="stylesheet" type="text/css">
<script src="http://code.gijgo.com/1.0.0/js/gijgo.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="dialog" title="Wikipedia">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png" width="320"/>
</div>
</body>
</html>
You can also allow the users to control the size if you set resizable to true. You can see a demo about this at http://gijgo.com/Dialog/Demos/bootstrap-modal-resizable
A simple CSS solution that will vertically and horizontally center the modal:
.modal.show {
display: flex !important;
justify-content: center;
}
.modal-dialog {
align-self: center;
}
For Bootstrap 2 Auto adjust model height dynamically
//Auto adjust modal height on open
$('#modal').on('shown',function(){
var offset = 0;
$(this).find('.modal-body').attr('style','max-height:'+($(window).height()-offset)+'px !important;');
});
I had the same problem with bootstrap 3 and the modal-body div's height not wanting to be greater than 442px. This was all the css needed to fix it in my case:
.modal-body {
overflow-y: auto;
}
Mine Solution was just to add below style.
<div class="modal-body" style="clear: both;overflow: hidden;">
As of Bootstrap 4 - it has a style of:
#media (min-width: 576px)
.modal-dialog {
max-width: 500px;
}
so if you are looking to resize the modal width to some-width larger, I would suggest using this in your css for example:
.modal-dialog { max-width: 87vw; }
Note that setting width: 87vw; will not override bootstrap's max-width: 500px;.
My search led me here so might as well add my two cents worth of idea. If you are using Monkey friendly Twitter Bootstrap modal then you can do something like this:
var dialog = new BootstrapDialog({
id: 'myDialog',
title: 'Title',
closable: false,
// whatever you like configuration here...
});
dialog.realize();
if (isContentAYoutubeVideo()) {
dialog.getModalDialog().css('width', '80%'); // set the width to whatever you like
}
dialog.open();
Hope this helps.
If you only want your modal box to resize when the content overflow, otherwise keep original size.
Use
<div class="modal-dialog" style="display:grid;">
instead of
<div class="modal-dialog" style="display:table;">

Categories