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.
Related
enter image description hereHi I have an action that returns partial view I want to call it partial twice from view after once inside a modal and once outside the modal to fit the site to mobile. I use #html.action what actually happens is that there are events on click in partial and the js always listens only to the first and the one I put second inside a modal for example does not work. If I change their order on the page it will be reversed. Looking for a solution how to call that partial.
my code:
#Html.ActionLink("Search", "Cars")
<div class="modal fade carDetielsModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-header">
<button class="close" aria-label="Close" data-dismiss="modal">
#*<span aria-hidden="true">×</span>*#
<img src="~/images/icon_X (1).png" />
</button>
</div>
<div class="modal-content">
#Html.Action("Search", "Cars")
</div>
</div>
</div>
</div>
#Html.ActionLink("Search", "Cars")
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;
}
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.
So my modal works greats on every other browser, for some reason in IE, when I go to the site... the modal is not automatically hidden. It's already open :/
I did modify the bootstrap css to only have styles needed to make modal work, and it works fine on chrome, safari, ff, ie 9 & 10, just not 8.
Any idea what could be wrong?
<a data-toggle="modal" class="byodbtn" title="byod-whitepaper" href="#myModal">Download White Paper</a>
<div class="modal hide fade workspace-brochure" id="myModal" 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="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
{sn-english-form-workspace}
</div>
</div>
Try putting the following in your css:
#myModal {
display: none;
}
If you are using IE11 it should work properly.
For IE versions =< 10, problem occurs when fade class is used. Try removing it -
jQuery(document).ready(function($) {
if ( jQuery.browser.msie && 10 >= jQuery.browser.version ) {
jQuery('.fade').removeClass('fade');
}
css styling issue. Make sure you update to the latest bootstrap is applicable. Best way is to create a new css styling.
$('yourclassorID").on("click", function(){
$('.modal').removeCLass('hide');
})
CSS:
hide{
display:none;
}
When a user first initializes your view make sure to have a class that can be removed example being "hide"
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