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.

Shaded bootbox dialog

I'm using bootbox to create bootstrap modals. Here is how I'm creating a sample one:
bootbox.dialog({message: "hello"});
My problem is that the rendered dialog is kind of disabled (all screen is shaded), I can't click on it and even ESC cannot make the modal disappear!
When I inspect the dialog element in the browser this is what I see:
<div class="bootbox modal fade in" tabindex="-1" role="dialog" style="display: block;" aria-hidden="false">
<div class="modal-backdrop fade in" style="height: 321px;"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="bootbox-close-button close" data-dismiss="modal" aria-hidden="true" style="margin-top: -10px;">×</button>
<div class="bootbox-body">hello</div>
</div>
</div>
</div>
</div>
I checked with bootbox examples and it looks like it's the same CSS classes that have been used. So what's wrong here?

I've to to add the following CSS to fix the problem:
.modal-backdrop.fade.in {
z-index: 0;
}

Bootstrap 3 Modal won't pop up when triggering from anchor tag

Looking at some video tutorials I follow what has been done but don't seem to get to modal of the register link to trigger.
Here is the link I want to trigger:
<li>Register</li>
Here is the modal that should be triggering
<!-- Register Modal -->
<div class="modal fade" id="#register-modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2>Register</h2>
</div>
</div>
</div>
</div>
I assume that there should be jQuery to be implemented after looking at other answers but i do not see how come if the jQuery comes from the bootstrap. The Bootstrap 3 documentation seems to do the same as I did http://getbootstrap.com/javascript/#modals-examples

The id attribute shouldn't have a hashtag.
Change
<div class="modal fade" id="#register-modal" role="dialog"></div>
to:
<div class="modal fade" id="register-modal" role="dialog"></div>
Working Example

Bootstrap Modal - Set remote path and open programmatically

I'm using bootstrap 3 modals using the remote path option as follows.
view
<div id="modCurIssue" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!--- content from mystuff.htm will appear here --->
</div>
</div>
</div>
This works fine, but instead of clicking the link I want to open the modal programmatically!
I'm trying to avoid triggering a click() event on the link if possible.

As of 3.2.1 the remote option is deprecated and will be removed in future versions. It is advisable to load the content explicitly and then call the show method to open the modal:
$('#modCurIssue').find('.modal-content').load( 'mystuff.htm', function() {
$('#modCurIssue').modal( 'show' );
});

According to the methods section on http://getbootstrap.com/javascript/#modals it's quite easy:
$('#modCurIssue').modal('show')

view
<div id="modCurIssue" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<iframe src="mystuff.htm"></iframe>
</div>
</div>
</div>

Bootstrap row-fluid in a iframe

I have created a bootstrap modal window in which I have placed an iframe.
Now when I try make use of the row-fluid bootstrap class all the rows sit on top of each other.
This only occurs in firefox not in google chrome.
Suggestions Please.
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" >
<div id="myModalBody" class="modal-body">
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'></button>
<h3 id='myModalLabel'>Profile</h3>
<iframe id='profile' width='99.5%' height='94%' style='border-width: 0;' scrolling='no'></iframe>
</div>
function setprofile(id)
{
profileid=id;
$('#profile').attr('src','profile.php?profileid=" + profileid + "');
}

I had a similar problem and figured out that I've used the wrong elements. Here is my question and a solution for it Bootstrap code in an iframe is not rendered properly