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.

Modal don't show up correctly

I'm having a problem with a modal which doesn't show up correctly
https://github.com/gothraven/Problem
When i check the code source of the page i have this
"test.html" and it works fine in a saperate html file when i copy and past it.
but this is the original php file "modif_ques.php" with the included files
modifc_popup.php ,addc_popup.php
I checked in the page inspector and i found this, i don't know how this happened
(check here)
<div id="modif_data_Modal" class="modal fade" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">a lot of things here</div>
</div>
</div>
when i click it becomes
<div id="modif_data_Modal" class="modal fade in" style="display: block; padding-right: 19px;">
<div class="modal-dialog">
<div class="modal-content">a lot of things here</div>
</div>
</div>

I found the answer which was a problem in my code
i removed this, which was a mistake
<form></form>
and changed this
<a href='modif_champ.php?cid=$row[cid]' class ='close' data-toggle='modal' data-target='#modif_data_Modal'><i class='glyphicon glyphicon-cog'></i></a>
with this
<button class='close' data-toggle='modal' data-target='#modif_data_Modal'><i class='glyphicon glyphicon-cog'></i></button>
i don't know but apearently to show the modal proparly we need to use <button> button instead of <a>

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

pop shows the scrollbar(vertical)

i m working with wordpress in bootstrap theme. my problem is that i opened a popup on my home page and its working fine in mozila but in chrome it shows vertical scrollbar.plzzzz guys help me.
here is my code for popup div:
<div id="openHouse" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="overflow-y:hidden">
<div class="modal-body">
<button type="button" class="close well" data-dismiss="modal">×</button><br />
<img src="http://pearlacademy.com/wp-content/uploads/2012/11/Open-House-2.jpg" />
</div>
</div>​
and jquery file:
<script>
jQuery(document).ready(function($) {
$('#openHouse').modal('show');
});
</script>

If you dont know what jquery plugin you are using, you can add width and height via css. Thanks