I'm using the modal plugin from twitter-bootstrap and i'd like to know the time that the modal spends in appear to show an alert before.
In this example that I did you can see what I mean: http://tinker.io/e69ff/6
HTML
<button id="mod" class="btn btn-primary btn-block" data-toggle="modal" data-target="#myModal">
hello
</button>
<!-- Modal -->
<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 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
Hello all!
</div>
</div>
JS
$(function () {
$("#mod").click(function(){
$('#navigate-away').modal('show');
});
});
CSS
#mod{
margin-top: 100px;
}
But there's no event for this in the documentation... There is a way to handle this? Any tip or advice would be appreciated.
If you need more info, let me know and i'll edit the post.
It is in the docs, you use the shown event to know when animations have completed:
"shown: This event is fired when the modal has been made visible to the user (will wait for css transitions to complete)."
$('#myModal').on('shown', function () {
// do something…
})
Related
From a view (let's say MyView.cshtml) in ASP.NET MVC application I am displaying a modal window, _MyConfirmModalWnd.cshtml. I have placed the modal window in Views\Shared folder.
Modal window is shown but some things are not working well:
Look and feel is not being show correctly
Cross button is not being correctly placed in the window
When I click on cross button it is not working, modal window is not closed.
Modal window is not being vertically and horizontally centered on the screen despite I am indicating using modal-dialog-centered class.
My modal window is shown as below:
instead of being shown with a look and feel similar to that shown in bootstrap documentation:
Modal window _MyConfirmModalWnd.cshtml:
<div class="modal fade" id="confirmModalDialog" tabindex="-1" role="dialog" aria-labelledby="modalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary">Yes</button>
</div>
</div>
</div>
</div>
View MyView.cshtml (code in script section):
function askForConfirmation() {
var success = function () {
// Do something on button 'Yes' clicked
};
var cancel = function () {
// Do something on button 'No' clicked
};
var title = "Caution!";
var message = "You are about to invoice,\nDo you want to continue?";
showConfirmation(title, message, success, cancel);
}
showConfirmation = function (title, message, success, cancel) {
var modal = $("#confirmModalDialog");
modal.find(".modal-title").html(title).end()
.find(".modal-body").html(message).end()
.modal({ backdrop: 'static', keyboard: false })
.on('hidden.bs.modal', function () {
modal.unbind();
});
if (success) {
modal.one('click', '.modal-footer .btn-primary', success);
}
if (cancel) {
modal.one('click', '.modal-header .close, .modal-footer .btn-default', cancel);
}
};
Maybe... Do I have to import some specific javascript source files or css files in my modal view _MyConfirmModalWnd.cshtml?
UPDATE:
I have set margin and padding to 0 in the modal window _MyConfirmModalWnd.cshtml as below:
<div class="modal fade" id="confirmModalDialog" tabindex="-1" role="dialog" aria-labelledby="modalCenterTitle" aria-hidden="true" style="margin:0;padding:0">
<!-- Rest of the stuff -->
</div>
...and now modal window appearance seems ok except button 'x':
However modal window is not being vertically and horizontally centered on the screen despite of indicating it by using modal-dialog-centered. Why is it not being centered on the screen? am I missing something else?
UPDATE 2:
Finally I have made some adjustments to modal window:
I have only set style="padding:0px" for outer div. Margin:0px is not necessary.
I have set style="margin-top:-30px" for close button
Below the code:
<div class="modal fade" id="confirmModalDialog" tabindex="-1" role="dialog" aria-labelledby="modalCenterTitle" aria-hidden="true" style="padding:0px">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-top:-30px">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary">Yes</button>
</div>
</div>
</div>
</div>
Now modal window has below look and feel:
Things remaining to do:
To center modal window vertically and horizontally on the screen.
UPDATE 3:
I have done a little more adjustments by overriding style. I have added below style attributes to the outer div:
margin-left:0px
left:42%
Additionally I have set a minimum width:
min-width:15%
With above attributes overrided, modal window is centered horizontally.
To center vertically I have to set style attribute top:40% but once I add this attribute, modal window does not show. However if I open developer tools, with them opened, in debug mode, then modal window is shown. I do not understand why modal window behaves in this way when I add top:40% attribute.... Any ideas?
below the final code:
<div class="modal fade" id="confirmModalDialog" tabindex="-1" role="dialog" aria-labelledby="modalCenterTitle" aria-hidden="true" style="padding:0px;margin-left:0px;left:42%;min-width_15%"> <!-- NOTE:If I add top:40% then modal window is not shown,it is not being opened. It is only shown in debug mode when I make visible developer tools window -->
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-top:-30px">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary">Yes</button>
</div>
</div>
</div>
</div>
I'm new to programming, and I have this simple question but I can't figure out how to do it.
I got this working code from Boostrap 4:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
But instead of having a button I want to create a function to fire up the modal content:
function openModal(){
/* DESCRIPTION: Open the warning modal */
// data-toggle="modal" data-target="#exampleModal"
}
But I don't know how to the same thing as data-toggle and
data-target do in the button click.
Someone has a hint how to do that?
You have to use the Bootstrap JS api for the modal ( Link attached at the end of this answer ).
Here is the straight answer :-)
function openModal(){
/* DESCRIPTION: Open the warning modal */
$('#exampleModalLong').modal('show');
}
Here is another SO question related to this : How can I trigger a Bootstrap modal programmatically?
Here is a detailed link on Bootstrap official documentation on various javascript methods for modals.
https://getbootstrap.com/docs/4.0/components/modal/#methods
Just use this line in your function:
$('#myModal').modal('show');
Note: remember to replace your modal id with myModal.
I'm novice in web programming yet but I' m trying to learn :)
I want to hide a modal to show another modal("Please wait screen"),to wait for a function call to end (loadData()). But the first modal gets hidden and then the screen fades until function ends and only then the "Please Wait" modals appears.
Any help is welcome.
Ps: Sorry for my bad english...
HTML
First modal
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<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>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Modal 1</h4>
</div>
<div class="modal-body">
<button type="button" id= "btn1" class="btn btn-primary" data-target="#modal1">Click</button>
</div>
</div>
</div>
</div>
The second modal
<div class="modal fade bs-example-modal-sm" id="myPleaseWait" tabindex="-1" data-backdrop="static" data-keyboard="false" role="dialog" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
<span class="glyphicon glyphicon-time">
</span> Processing data...
</h4>
</div>
<div class="modal-body">
<div class="progress">
<div class="progress-bar progress-bar-info
progress-bar-striped active"
style="width: 100%">
</div>
</div>
</div>
</div>
</div>
</div>
Javascript
$('#btn1').click(function(e) {
e.preventDefault();
$('#modal1').modal('hide');
$("#myPleaseWait").modal("show");
loadData();
});
Bootstrap's modal class exposes a few events for hooking into modal functionality.
show.bs.modal
This event fires immediately when the show instance method is called.
shown.bs.modal
This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.modal
This event is fired immediately when the hide instance method has been called.
hidden.bs.modal
This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
loaded.bs.modal
This event is fired when the modal has loaded content using the remote option.
$('#btn1').click(function(e) {
e.preventDefault();
$('#modal1').modal('hide');
$('#modal1').on('hidden.bs.modal', function (e) {
$("#myPleaseWait").modal("show");
});
loadData();
});
For more details refer Bootstrap Documentation
Thanks #sri, with your explanation I could resolve it.
$('#btn1').click(function(e) {
e.preventDefault();
$('#modal1').modal('hide');
$("#myPleaseWait").modal("show");
$('#myPleaseWait').on('shown.bs.modal', function (e) {
loadData();
});
});
Simple bootstrap modal triggered by a button that once it's pushed to heroku, the modal no longer shows up when the button is clicked. I can't seem to figure out why, I've tried all solutions I could find online but none have worked. I am using the exact modal/button combo off of the bootstrap site, removed my customization until I was sure I could get it functioning onto Heroku. HTML below. Here's the link to my heroku app - http://themommyboxco.herokuapp.com/
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
This modal is not showing up on heroku!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You have a syntax error in your application.js, line 13371
$(function()
$("#menu").click(function() {
Should be:
$(function() {
$("#menu").click(function() {
Make sure the closing tag is there later too.
I don't know very much about Javascript, but I've been learning a lot the past few days.
I cannot, for the life of me, figure this one out.
I'm using the modal function in Bootstrap and I've got it working and everything. But now, I want something to happen (insert CSS) once they user closes the dialogue box.
I know how to do the insertion of CSS. How do I initiate it when data-dismiss is clicked?
Thank you.
EDIT: Did I do this correctly? It doesn't seem to work.
<script>
$(document).ready(function(){
$('.testing').click(function(event){
$('.modal-body').empty();
if($(event.target).is('#step2')) {
$('.modal-body').append('<img src="//placehold.it/600x350/449955/FFF" class="thumbnail img-responsive" id="step100">');
} else if ($(event.target).is('#step3')) {
$('.modal-body').append('<img src="//placehold.it/600x350" class="thumbnail img-responsive" id="step100">');
} else { }
$('#modal').modal('show');
$('#modal').on('hide.bs.modal', function (e) {
$("#wheel").css("-webkit-animation-play-state","running");
$(".fa").css("-webkit-animation-play-state","running");
})
});
});
</script>
Modal code:
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
FOR FUTURE READERS: Turns out my code was just fine. The problem is that my edits weren't being reflected on the page. WordPress cache issue, I'm assuming.
See the hide.bs.modal event here:
Bootstrap Modal Docs
$('#myModal').on('hide.bs.modal', function (e) {// do something...})
for the next bit, I think
$('#modal').modal({show:true});
should be
$('#modal').modal('show');
But maybe that's not where the problem is... what part isnt working?