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?
Related
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've got this project, a counter for a game... The idea is that when I click the "#buttonplay", it runs the jQuery function and hides the modal. That is all right, but after the modal is hidden, the function DisplayMoreInfo doesn't work... That function has to, when the user clicks on a specific game, provide more info about it.
I've got a game done without the function that runs after the #buttonplay is clicked, and it shows the info before I create a new game... But after, doesn't do anything...
This is my HTML:
<div id="contentplays" style="display: none">
<button type="button" id="buttonplay" data-toggle="modal" data-target="#myModal">
New Game
</button> <!--This button is to create a new play-->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New Game</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<!--Here it goes the info of the new game-->
</form>
</p>
<br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="submitnew" class="btn btn-success">Save changes</button>
</div>
</div>
</div>
</div>
<!--This is the game WITHOUT the jQuery function of the #buttonplay-->
<div class="game done" onclick="DisplayMoreInfo(NewGame);">
<h1>NewGame</h1><br>
<p class="info">21/01/2017</p><br><br>
</div>
<div class="moreinfodone" id="NewGame" style="display: none">
<p class="person">Player 1: Pirulo</p>
<p class="person">Player 2: Zultano</p>
<p class="person">Player 3: Mengano</p>
</div>
</div>
And this is my JavaScript:
//The jQuery function
$('#submitnew').click(function () {
$('myModal').modal('hide');
//Some code here
});
//The function that does't work after the .modal('hide')
function DisplayMoreInfo(game) {
$(game).toggle();
}
Thanks in advance for any answer!!!
You might have to change this line of code from
onclick='DisplayMoreInfo(NewGame)';
To:
onclick='DisplayMoreInfo("#NewGame")';
Why did not work?
You are trying to pass NewGame to the DisplayMoreInfo function, which is at that point undefined.
Next time try to debug your code better using Chrome!
I have a bootstrap modal, which has table with attribute contenteditable = trueinside of it (table is created dynamically with js). I'd like to set up a neat feature - if user presses cancel then the changes in table will be dismissed. I understand that i could do this with writing a function for different states and then calling out the previous state in case of cancel. I'm just thinking that is there a quicker-better-faster approach?
I did some searching and found one link which had similar issue, but the approach and result there are a bit different from mine which means that it didn't work for me.
Here's my code - parts of it are in Estonian, i don't think in general code is necessary for this question but i'll still provide:
<div class="modal fade" id="ajamasinModal" 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" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><i class="fa fa-cog" style="font-size:20px"></i> Ajamasin</h4>
</div>
<div class="modal-body">
<div id="changeablevoor"></div>
<button type="button" class="btn btn-primary" onClick="muudaClick()">Change</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
Try the following approach ( view comments inline ):
Html
<div class="modal fade" id="ajamasinModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
//...
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
JS
// Add hidden event of the modal
$('#ajamasinModal').on('hidden.bs.modal', function (e) {
cancelModal(); // Call the function to cancel the modal after hiding of the modal
})
// Cancel the modal
function cancelModal() {
// Re-generate content with default values
}
More information about these events of Bootstrap Modal can be found here in the Docs of Bootstrap: Bootstrap Modal Events
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'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…
})