I have a modal and I need to trigger it inside a javascript function. Here is my function:
$(document).ready(function () {
if (sMail == 202) {
$('#contato').modal('show');
} else if (sMail != 0) {
console.log("error");
}
});
and my modal
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
aria-hidden="true" id="contato">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>
when the function is executed, the page goes a little darker, just like when modals are open, but it doesn't show it :(
It works here: https://jsfiddle.net/jyax9d3f/1/ and also works with a button.
I ended up using alert instead of modal.
I have a code that what I wanted to do is to close the modal on ajax success. This is my code:
script
success: function() {
console.log("delete success");
$('#deleteContactModal').modal('hide');
$( "#loadContacts" ).load( "/main/loadContacts" );
}
html
<div class="modal fade" id="deleteContactModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<!--everything goes here -->
</div>
</div>
</div>
Everything just works except when the code $('#deleteContactModal').modal('hide'); triggers, it just shows a black faded screen like this:
The modal closes but the black faded color is still present. Am I missing something here? Thank you in advance.
I'm using bootstrap 3.3.
try to add this attribute with your modal div aria-hidden="true"
eg:
<div aria-hidden="true" class="modal fade" id="deleteContactModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
Here is my working example
<div class="modal fade" id="copy_course_modal" tabindex="-1" role="dialog" aria-labelledby="copycourse" aria-hidden="true">
<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" id="purchaseLabel">Copy Chapter</h4>
</div>
<div class="modal-body">
Modal body content here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="saveCopiedCourse()">Copy Course</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and on success doing same.
$("#copy_course_modal").modal('hide');
I have the same exact problem and the only way I could find to work is to individually remove the parts of the modal is generating. Just put this function in yous js and make an onclick event at your button in your html or js. Hope I helped.
function hideModal(){
$(".modal").removeClass("in");
$(".modal-backdrop").remove();
$('body').removeClass('modal-open');
$('body').css('padding-right', '');
$(".modal").hide();
}
Try:
$(".modal.in").modal("hide");
This will hide the currently active modal.
Ran into this issue myself in a similar situation.
It seems to be related to the asynchronous nature of javascript + bootstrap animations.
It's a dirty, dirty hack, but wrapping the call to 'hide' in a timeout made it work for me:
setTimeout( function(){$("#myModal").modal('hide')}, 300 );
If employing this "solution" to the problem, you may need to adjust the timeout value. Bootstrap animations seem to take around 125 - 200 ms, so 300 provides a nice safety buffer.
$('#deleteContactModal').modal('hide')
Find this link
https://getbootstrap.com/docs/3.3/javascript/#modal-hide
It gives detail https://getbootstrap.com/docs/3.3/javascript/#modal-hide regarding model window
Simple programmatically click close button of dialog.
$("button[data-dismiss=\"modal\"]").click();
This will automatically close dialog.
This issue will solve by hiding individual elements of modal.
Such as :
$("#modal").modal('hide');
$('body').removeClass('modal-open');
$(".modal-backdrop").remove();
I tried several of the proposed solutions and the only one that worked for me was:
$(".modal.in").modal('hide');
Some did clear the modal and the backdrop but then it did not redisplay on
subsequent invocations.
$.ajax({
type: "POST",
url: "admin/pc-item-insert.php",
data: $(this).serialize(),
success: function(data) {
$("#showinfo").html(data);
$(".modal").modal("hide");
},
});
This is just a timing problem. The Fade animation takes time and javascript cant close it. just cancel the fade animation and it works properly!
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
...
</div>
(Not use class="modal fade", jus class="modal")
None of these options worked for me apart from the one that said don't use modal fade. However I wanted to use modal fade. My code was making an ajax call to save changes, and then on success was doing this:
$('#myModal').modal('hide');
doRefresh();
The problem was doRefresh was then updating the page under the modal. If I removed the doRefresh, it worked. So what I ended up doing was this:
$('#myModal').modal('hide');
setTimeout(doRefresh, 500);
To clear the backdrop
$(".modal-backdrop").toggleClass("hide, show");
tested in bs4
I define my modal :
<div class="modal fade" aria-hidden="true" role="dialog" id="modal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button id="btnCloseModal" hidden type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Waiting</strong>
</div>
<div class="modal-content">
<div>
Please don't close your tab!
</div>
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<div class="modal-footer">
<strong>Loading...</strong>
</div>
</div>
</div>
</div>
then I create function :
var StopLoadingAnimation = function () {
$('#modal').on('show.bs.modal', function (e) {
console.log("trigger show");
$("#btnCloseModal").trigger("click");
});
$('#modal').on('shown.bs.modal', function (e) {
console.log("trigger");
$("#btnCloseModal").trigger("click");
});
$('#modal').on('hidden.bs.modal', function (e) {
console.log("event");
$(e.currentTarget).off('shown');
$(e.currentTarget).off('show');
});
$("#btnCloseModal").trigger("click");
}
My idea is after ajax success is will call function StopLoadingAnimation what will trigger event click on element btnCloseModal ( It like you click button btnCloseModal when you closing modal )
I have used the same example from materializecss modal.
The problem here modal is opened before the click event from anchor.
<a class="modal-trigger" href="#modal1">Specialization</a>
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div></div>
I have added the JavaScript code :
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal({
dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: .5, // Opacity of modal background
in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration
});
});
1st image is where modal opens up before the modal-trigger event
2nd image on click event of modal-triger
A bit late on this post, but I wanted to include that you should:
Be using the latest version of Materialize
use the modal() function to initialize your modal without automatically opening it
From the documentation for Example:
$(document).ready(function(){
$('.modal').modal({
dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: .5, // Opacity of modal background
inDuration: 300, // Transition in duration
outDuration: 200, // Transition out duration
startingTop: '4%', // Starting top style attribute
endingTop: '10%', // Ending top style attribute
ready: function(modal, trigger) { // Callback for Modal open. Modal and trigger parameters available.
alert("Ready");
console.log(modal, trigger);
},
complete: function() { alert('Closed'); } // Callback for Modal close
});
});
Can't reproduce the described problem Fiddle
modal is opened before the click event from anchor
$(document).ready(function() {
$('.modal-trigger').leanModal({
dismissible: true,
opacity: .5,
in_duration: 300,
out_duration: 200,
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Specialization</a>
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
</div>
Unless you have following $('#modal1').openModal(); in JS file or somewhere in page which opens the modal on page load / DOM ready Fiddle
$(document).ready(function() {
$('#modal1').openModal();
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Specialization</a>
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
</div>
Is there another way to varying modal with Picture based on trigger button?
If I have the trigger button which contains the picture:
<button type="button" data-toggle="modal" data-target="#ViewModal" data-picture="<?php echo $user->getPicture(); ?>"></button>
What's the best approach to fetch and show the picture on the modal?
This is my picture field in that modal:
<div class="modal-body">
<center>
<img src="**(SHOULD I PUT THE PICTURE IN HERE?)**" name="picture" width="140" height="140" border="0" class="img-circle">
</center>
</div>
And this is the javascript who handle the modal :
<script type="text/javascript">
$('#ViewModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var picture = button.data('picture')
var modal = $(this)
modal.find('.modal-body img[name="picture"]').val(picture)
})
</script>
Note : I can not fetch the picture in modal with this line of code
Is there another way to varying modal with Picture based on trigger button?
In my opinion you should declare your modal html somewhere in the footer of the page, so you have more control and more ease in displaying your image.
<div class="modal fade" id="my_image" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<center>
<img src="" id="picture" width="140" height="140" border="0" class="img-circle">
</center>
</div>
</div>
</div>
</div>
And then you just change the src attribute of the picture element from your function.
var picture = button.data('picture')
$('#picture').attr('src',picture);
Below is my Code for edit vehicle modal call
<?php for($i=0;$i<count($vhcl);$i++){
echo "<a data-toggle='modal' href=' ' data-remote='using/vehicles/vehicle-form.php?id=".$vhcl[$i]['mvid']."&m=e' data-target='#vehicle-modal'><i class='icon-pencil color-orange'></i></a>";
} ?>
<div class="modal fade" id="vehicle-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
Now when I first time click on this link it takes few seconds and modal appears with 1st vehicle edit data,
But now when I click on 2nd vehicle modal appears instantly with same data, and its refreshed after 2 3 seconds( it may also take more time in slow connections ).
So question is can we have any modal-body load completed check ?
Until the modal body is loaded with new refreshed data, loading image should be there in modal body and then the actual data.
You can do the following:
Try to call modal using javascript instead of attributes. Before modal start to download remote path content you can delete the modal content.
This is example in JSFiddle
Html:
<a href='#' class="open-modal" data-remote='http://fiddle.jshell.net/bHmRB/22/show/'><i class='icon-pencil color-orange'></i></a>
<br/>
<a href='#' class="open-modal" data-remote='http://fiddle.jshell.net/bHmRB/40/show/'><i class='icon-pencil color-orange'></i></a>
<div id="modal"></div>
Javascript:
$(function(){
$("a.open-modal").click(function(e){
e.preventDefault();
var modal=$("#modal");
modal.empty();
modal.append("<div class='modal fade modal-dialog' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'></div>");
$('.modal-dialog').modal({
remote:$(e.currentTarget).attr("data-remote")
});
});
});
EDIT:
You also can place some image or text like "Loading..." while loading.
This is example in JSFiddle
Html:
<span id="onLoad" style="position:absolute;left:100px;top:100px;z-index:1000000;" hidden>Loading...</span>
<a href='#' class="open-modal" data-remote='http://fiddle.jshell.net/bHmRB/22/show/'><i class='icon-pencil color-orange'></i></a>
<br/>
<a href='#' class="open-modal" data-remote='http://fiddle.jshell.net/bHmRB/40/show/'><i class='icon-pencil color-orange'></i></a>
<div class='modal fade' id='modal-dialog' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'></div>
Javascript:
$(function(){
$("a.open-modal").click(function(e){
$('#onLoad').show();
e.preventDefault();
var modal=$("#modal-dialog");
modal.empty();
modal.modal({
}).load($(e.currentTarget).attr("data-remote"), function (e) {
$('#onLoad').hide();
});
});
});
Here is the easier solution based on the #Nicolai's solution
I was experiencing issues with the solutions above, that's I'm also posting my solution, so someone can get it correctly in future :)
HTML:
<a class="open-custom-modal" data-remote="/url/1" data-toggle="modal" data-target="#custom_modal">URL 1</a>
<br />
<a class="open-custom-modal" data-remote="/url/2" data-toggle="modal" data-target="#custom_modal">URL 1</a>
<div class="modal fade" id="custom_modal" tabindex="-1" role="dialog" aria-labelledby="custom_modal_label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
</div>
</div>
</div>
</div>
JavaScript:
$(function() {
$("a.open-custom-modal").click(function(e) {
e.preventDefault();
$('#custom_modal').modal({
}).find('.modal-body').load($(e.currentTarget).attr("data-remote"), function(e) {
//loading completes here
});
});
});