We Keep Coding

Twitter Bootstrap 4 modal box won't show in Chrome

Well, recently spotted some weird activity: I have a Bootstrap 3 modal box, that activates via data-attributes. Here is my HTML:
<li data-toggle="modal" data-target="#modalImage" class="quickview" data-img-src="<IMG SRC by Laravel Blade>">
<img src="<IMG SRC by Laravel Blade>" alt="<IMG ALT by Laravel Blade>">
</li>
And the modal box itself:
<!--modal-image-->
<div class="modal fade" id="modalImage" tabindex="-1" role="dialog" aria-labelledby="modalImage" role="dialog"
aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content" style="background-color:rgba(255,255,255,.8)!important">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" ><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body text-center">
<img class="modal_image" src="" />
</div>
</div>
</div>
</div>
And here is my JavaScript (I use it because this modal is used for opening a bigger image on click, and images are inside the image gallery (bxSlider)):
/* Open Modal box for larger image; */
$(".quickview").on("click", function() {
var $this = $(this);
var imgSrc = $this.data("img-src");
$(".modal-body > img.modal_image").attr("src", imgSrc);
$('#modalImage').modal('show');
});
The problem (and the weirdness) is that it works on every browser I tested, but Chrome. It even works on IE and Edge (that is based on Chromium). In Chrome nothing happens, no Console error messages, anything.
Any ideas?
P.S. And yes - my JS is wrapped with $(document).ready, so it executes only when page is loaded

It seems like latest chrome broken down modal display on Chrominium using latest version. I also have same issues as well.

Enable actions (click, selecting text, whatnot) outside of bootstrap modal

The default bootstrap modal adds a full page element that when clicking closes it. With data-backdrop="static" data-keyboard="false" you can disable this functionality and so that clicks outside the modal and the esc key do nothing.
I'd like to use a bootstrap modal that allows me to click, select and perform all the normal functions on the page without dismissing it. The only way to dismiss it would be to click buttons on the modal (x or cancel for example).
How can I use a bootstrap modal like that?
<!-- Example modal **without** the functionality I want -->
<div id="myModal" class="modal fade" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Settings</h4>
</div>
<div class="modal-body">
<p>Settings</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button id="loadpage" type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>

There were three steps I took to achieve the desired effect. My modal is prepended to the body, the steps may differ if yours is not.
Bootstrap appends a div element to the body (body > .modal-backdrop). It has the styles that cause the white "overlay" effect. This whole element can be deleted or the styles overridden.
A class is added to the body, modal-open. This has the css overflow: hidden;. Either remove that class, or override the css.
The actual modal will also need some css added. width or max-width worked for me. (makes scrolling of the modal work)
#myModal {max-width: 300px;}
Don't make those changes for every modal, use a trigger to restrict them to a specific one.
$("#myModal").on("show.bs.modal shown.bs.modal", function(e) {
// Remove overlay and enable scrolling of body
$("body").removeClass("modal-open").find(".modal-backdrop").remove();
});
The above causes some "flashing" with the removal of .modal-backdrop. If that is unwanted, overriding the styles with css or preventing the default bootstrap action may be best.

I saw no solution for what you ask and I needed to have this feature, I did a function to do that.
It's working with jquery ui draggable element but you can move out any code related to that and it should work as well.
https://jsfiddle.net/wyf3zxek/
modalDraggableClickOutside('#modal-example', 'iframeLoaded', 'Modal shown');
Note that it's not working very well in an iframe (such as js fiddle) : in an iframe you need to move the modale once

Enable background use with modal open in Bootstrap 4

There are other similar questions here, but they all mention to change this:
.modal-backdrop {
display: none;
}
To enable using the rest of the page while modal is open, except my modal doesn't have this .modal-backdrop, I don't know if it's something new with Bootstrap 4, but this solution did not work.
My modal :
<div class="modal" data-keyboard="false" data-backdrop="false" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary text-white" id="header" style="cursor: move">
Search
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="forms">
</form>
<hr>
<div class="container" id="table">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary">Export</button>
</div>
</div>
</div>
</div>
The idea here is to just have a dialog window that is draggable (I'm using jquery UI), is modal the correct component? Or cards? I used modal as they already position on the center and you don't need javascript to set up the close button.
Also open to suggestions of external libraries that implement a panel-like module and integrates will with Bootstrap.
And is there a way to make the background enabled without messing Bootstrap files too much?

I'm focusing on the .modal-backdrop here, as I assume you already solved the draggable part by using jQuery UI.
When it is used, .modal-backdrop actually is a fixed positioned div element covering the entire viewport and inserted before the </body> tag when the modal dialog is shown. By default this provides the shaded background behind the modal, and also listens to click events to close the modal if needed.
By using data-backdrop="false" this element is not inserted into the DOM, so visually it will seem that there is nothing behind the modal. However, the .modal tag is also an element covering all the viewport (above the page, in the foreground), and acts as a wrapper for the actual .modal-dialog tag.
So, in your scenario it is actually the .modal that is blocking (or catching) user interactions from the rest of your page.
You can overcome that with the help of the pointer-events css property like so:
.modal {
pointer-events: none;
}
The .modal-dialog will still receive interactions and will work as expected, but the page in the background will be clickable too.

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/

Unable to close bootstrap3 modal when loading iframe as content

I'm using bootstrap 3 modal.
Following is my code.
<div id="myModal" 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>Modal header</h3>
</div>
<div class="modal-body">
<iframe src="remote.html"></iframe>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
Now every thing works like it should except when the modal is triggered I am unable to hide the modal(even with the close button).
Howwever when I use the modal without iframe the modal functions perfectly.
This has been eating my time for sometime, it would be great if someone could help me figure this out.

From KayakDave's answer here: https://stackoverflow.com/a/20818030/2576805
2) Add some jquery that is triggered when the modal dialog button is clicked. The following code expects a link destination in a data-src attribute and for the button to have a class modalButton. And optionally you can specify data-width and data-height- otherwise they default to 400 and 300 respectively (of course you can easily change those).
The attributes are then set on the which causes the iframe to load the specified page.
$('a.modalButton').on('click', function(e) {
var src = $(this).attr('data-src');
var height = $(this).attr('data-height') || 300;
var width = $(this).attr('data-width') || 400;
$("#myModal iframe").attr({'src':src,
'height': height,
'width': width});
});
3) add the class and attributes to the modal dialog's anchor tag:
<a class="modalButton" data-toggle="modal" data-src="http://www.youtube.com/embed/Oc8sWN_jNF4?rel=0&wmode=transparent&fs=0" data-height=320 data-width=450 data-target="#myModal">Click me</a>
In the jsFiddle provided at the bottom of the answer, the modal is able to be opened and closed without issue.