We Keep Coding

Using Intro.js hints on bootstrap modal window, hints displays behind modal

I am using the intro.js "hints" plugin (https://introjs.com/example/hint/index.html, https://introjs.com/docs/hints/api/) on a bootstrap web site. I need the hints to work on bootstrap modals, however the hints are displayed behind the modal window. I tried adjusting the z-index of the .introjs-hint-pulse and the .introjs-hint-dot selectors and the .modal selector with no results.
Any ideas on what I need to do to get the hints to display above the modal window as needed?
I also need to figure out how to hide all of the displayed hints at once, but then be able to show them again when the link is reclicked - like a toggle. I have one icon used to show the hints, and I want to be able to click again to toggle and hide the hints.
I am including links to the hints API, as it shows the options for refreshing and hiding the hints, but I am new to jQuery & JS and am not sure how to get it to work.
Also, I am trying to figure out a way to auto hide the hints on the modal if the modal is closed with them still visible.
I have a jsfiddle with a test modal and the intro.js hints. If you open the modal, then click on the "Show Hints" link, you will notice the hints are not visible. But if you close the modal you can see the hints are visible behind the modal window.
JS Fiddle link: http://jsfiddle.net/1aeur58f/998/
HTML of example:
<!-- Button trigger modal -->
Open Notes Modal
<!-- Modal -->
<div class="modal fade" id="notesModal" tabindex="-1" role="dialog" aria-labelledby="notesModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Notes</h4>
</div>
<div class="modal-body">
<div id="note-input" data-hint="Input your notes here." data-hintposition="top-middle" data-position="bottom-right-aligned">
<input type="text" name="note" class="col-md-11" maxlength="300"/><button id="add-note" data-hint="Select Add button to save and add your notes." data-hintposition="top-middle" data-position="bottom-right-aligned">Add</button>
</div>
</div>
<div id="note-total" data-hint="Track your remaining characters here." data-hintposition="top-middle" data-position="bottom-right-aligned" style="margin-left:15px;">0/300
</div>
<div><a class="btn btn-tour" href="javascript:void(0);" onclick="javascript:introJs().addHints();"><i class="fa fa-bus"></i> Show Hints</a></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The intro.js and introjs.css are linked in the jsfiddle external resources for viewing.

Try with this CSS:
.introjs-hint {
z-index: 9999999 !important;
}
In order to toggle hints you can (for example) do this:
var hints = false;
function toggleHints() {
if (hints) {
$("#txtToggle").html(" Show Hints");
introJs().hideHints();
} else {
$("#txtToggle").html(" Hide Hints");
introJs().showHints();
}
hints = !hints;
}
Check the fiddle updated: http://jsfiddle.net/beaver71/fc0rkakn/

Preventing loading other classes while opening bootstrap modal popup

I have a button on which I trigger opening bootstrap modal popup like following:
<a class="btn btn-app btnWatchlist" data-toggle="modal" data-target="#myModal" style="min-width:175px;margin:0;height:67px">
<i class="fa fa-save"></i> Add to Watchlist
</a>
The modal popup HTML is like following:
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
The Add to watchlist button is loaded into the DOM after a jQuery post to the server and when the server returns the HTML I simply update users DOM to display this button.
The issue here is that upon doing a jquery post I add a class which basically displays a shifting gear while the search is being performed and now when I press the button the modal is shown, but this "loading" class is loaded as well with on click of on the modal popup.
The code for making the loading class to appear is:
$body = $("body");
function StartLoading() {
$(document).on({
ajaxStart: function () { $body.addClass("loading"); }
});
}
function StopLoading() {
$(document).on({
ajaxStop: function () { $body.removeClass("loading"); }
});
}
Now how can I prevent mixing of these two while pressing the "Add to watchlist" button, so I can only display the modal and remove the loading class after the DOM is loaded??
P.S. So ultimately I don't wanna display the contents of the "loading" class upon clicking on the button to display the popup, just the modal popup itself ..

Not sure if I understand your question correctly, but you could create a variable that keeps track of whether the content of your modal has already been loaded and then wrap the statement $body.addClass("loading"); inside an if(modalHasNotBeenLoaded)?

Modal window blocks my page

I have a modal window but when I close the modal my page is blocked. I can not do anything. I need to refresh the page to get everything working again!
The strange is that sometimes everything works well or sometimes everything is blocked!
The button that opens the model:
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModalCode">Approve</button>
My modal window code:
<!-- Modal-->
<div class="modal fade" id="myModalCode" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<form id="formUpdateProgress" >
{!! csrf_field() !!}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Complaint Progress</h4>
</div>
<div class="modal-body">
<label class="control-label">Insert code:</label>
<div id='complaintProgress' style="position: relative;">
<input type="text" name="code" id="code" placeholder="Insert the code here">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
</div>
</div>
</div>
<!-- END MODAL -->
When I submit the form, I close the model!
$( '#formUpdateProgress' ).on( 'submit', function(e) {
$('#myModalCode').modal('hide');
});
EXAMPLE:
Modal window in my application:
Then I click Submit, everything works ok, the document is approved but something is locking the page:
Any idea why the page is blocked? Thanks in advance

Similar issues is discussed in here:
How to hide Bootstrap modal from javascript?
Seems that you have some issues in the way how your modal is handling the submit. Perhaps the easiest fix would be as was mentioned in one of the comments from the link above, add the following fix to remove the backdrop:
$('.modal-backdrop').hide();
Alternatively, you may even remove() it. I'd think, modal will re-create it again, if open.

It's looks like you are using bootstrap modal.
Bootstrap open not only modal, but page mask too. So you need to call bootstrap method to close. With code inspector you can find that body got class="modal-open" and extra div with "modal-backdrop fade in"
Just use <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> or yr element with 'data-dismiss="modal"' and all be ok)

function closeModal(name){
$("#"+name).modal('hide');
// I added the next line
$('.modal-backdrop').hide();
}
After I add the $('.modal-backdrop').hide(); everything its ok :)

Bootstrap modal on hidden does not trigger

Like the title says i have problem to getting the modal.on('hidden') event to run. I can open the modal without any problems. The code im using for it looks something like this:
var info = $('<img src="img/icons/info.png">');
info.attr('data-toggle','modal');
info.attr('data-target','#infoPopup');
The modal itself looks like this:
<div class="modal fade" id="infoPopup" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 id="popupHeader" class="modal-title"></h4>
</div>
<div id="popupBody" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
It Opens perfectly fine but it seems like the hidden event is not triggert when I'm closing it by clicking beside the modal the close button or the X on the top right.
$('.modal.in').on('hidden',function(){
console.log('test');
});
The selected modal is the correct one when i'm trying to access it on the console with $('.modal.in'). So i'm not trying to get a callback on the wrong modal. I also tried it with $('.modal.in').on('hidden.bs.modal',func...). But i got the same result.
Thanks for your help.

for bootstrap 3 you need to use hidden.bs.modal
$('.modal.in').on('hidden.bs.modal', function () {
// do something…
})
if your modal is not in DOM on load this should rather work
$(document).on('hidden.bs.modal','.modal.in', function () {
// do something…
})

Instead of using .modal.in use the id of the modal that you want to fire the event with. If you want to use it for all modals just use .modal and not .modal.in and you will use on hidden.bs.modal
here is a fiddle Fiddle
$('#infoPopup').on('hidden.bs.modal',function(){
alert("Modal Closed");
});

prevent bootstrap modal from opening when a button is clicked

I have a page with several bootstrap modals with:
data-toggle="modal" data-target="#modal-12345"
The problem is, I have an entire table row that is clickable, like
<tr data-toggle="modal" data-target="#modal-12345">
The modal content is in another hidden table row right below, followed by the next clickable row and so on. Now, this row also contains a button that will go to another page when clicked.
I need the entire row clickable so it opens the modal, except when the button to go to the other page is clicked, then I need to stop the modal from opening.
I need something like this
<script>
$('.ID').on('click', '.btn', function(e) { e.stopPropagation(); })
</script>
But targeting this:
data-toggle="modal"
I also tried giving the TR a class of "modaltoggle" and then calling it with the javascript as .modaltoggle but that didn't work either.

Add some kind of identifier for the item you don't want to trigger the modal, a class like no-modal for example, then in your jQuery add code for the modal's show.bs.modal event. Capture the relatedElement, which is the element that triggered the event, then see if it has the class you're looking for. If it does, run e.stopPropagation().
BOOTPLY
jQuery:
$('#myModal').on('show.bs.modal', function (e) {
var button = e.relatedTarget;
if($(button).hasClass('no-modal')) {
e.stopPropagation();
}
});
HTML:
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<button type="button" class="btn btn-primary btn-lg no-modal" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal Header</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
As you can see, the second button has a class called no-modal. When clicked, the jQuery checks for the existence of that class, and if it exists it prevents the modal from popping. Clicking the first button causes the modal to pop normally because it doesn't have that class.
Bootstrap modals trigger specific events when they're popped by an element on the page, from the moment they're triggered through the moment they've fully popped. You can read about these events to get an idea of what you can use them for by checking the Events section for Bootstrap modals in the official documentation.

$('#myModal').on('show.bs.modal', function (e) {
return e.preventDefault();
});
OR
<button type="button" class="custom" data-toggle="modal" data-target-custom="#myModal">Launch demo modal</button>
<script>
target = $(".custom").attr('data-target-custom');
if(condition) {
$(target).modal('show');
}
</script>
e.stopPropagation(); or e.preventDefault(); it will not work if you going reopen modal or if multiple modal used in your page.

Here's a JSFiddle to demo what I'm about to explain: http://jsfiddle.net/68y4zb3g/
As MattD explained and demonstrated, preventing a modal from launching is fairly easy, though his example applies to standard modal application. Since you use the .btn in your script code, I assume you applied it to all your buttons in question. I've also assumed that you kept the modal code similar to that on the Bootstrap demo page. If you provide your actual table code, I can tailor it specifically to what you already have.
$('tr .btn').on('click', function(e) {
e.stopPropagation();
});
td {
border: 1px #000000 solid;
padding: 10px;
}
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<table>
<tr data-toggle="modal" data-target="#modal-12345">
<td>Launch modal 12345</td>
<td><button id="btn-12345" class="btn">12345</button></td>
</tr>
<tr>
<td colspan="2" class="modal fade" id="modal-12345" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
12345
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</td>
</tr>
</table>
Note: I substituted the DIV that would normally act as the outer wrapper of the modal for the TD and added a tidbit of CSS to make it a little easier to see the separation in content.
By using a class that is applied to all the buttons, you don't have to write a function for every single ID. Having said that, I recommend using a custom class as your trigger. .btn is a standard class within the core of Bootstrap, so try using .modalBtn, to prevent any potential for conflict with legitimate Bootstrap functionality.
Hope this helps. ^^

Remove following line from your code:
data-toggle = "modal"
Then, in your function once your validation is done, write following code:
$('#myModal').modal({
show: 'true'
});