Develop Reference

Prevent Bootstrap Modal close on Esc key press

I am using NGX Bootstrap modal in my project. Inside the modal i have a form, right now if I press Esc key the modal is hiding.
How can I be able to show child modal(confirm modal) if any user is filling up the form and suddenly press the esc key or tries to close the parent modal.
Is there any way to show the child modal without closing the parent modal based on some condition if anyone presses the esc key.
<button type="button" class="btn btn-primary" (click)="parentModal.show()">Open parent modal</button>
<!-- parent modal -->
<div class="modal fade" bsModal #parentModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="dialog-nested-name1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 id="dialog-nested-name1" class="modal-title pull-left">First modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="parentModal.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-control">
<input type="text" placeholder="email" />
</div>
<div class="form-control">
<input type="text" placeholder="password" />
</div>
<button type="submit" class="btn-primary"></button>
</form>
</div>
</div>
</div>
</div>
<!-- confirmation modal -->
<div class="modal fade" bsModal #childModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="dialog-nested-name2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="dialog-nested-name2" class="modal-title pull-left">Second modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="childModal.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you want to exit? Your changes will not be saved.<br>
<button class="btn-danger">Discard</button>
<button class="btn-primary">continue</button>
</div>
</div>
</div>
</div>

Assuming you are using ng-bootstrap.
While using modal.open method you can pass keyboard attribute as false.
Its official doc can be found at :-
https://ng-bootstrap.github.io/#/components/modal/api
Eg:- this.ngbModal.open(content, {keyboard: false});

Bootstrap modal is not showing. How to resolve?

I want to show modal when it clicking "reportpet" but it not displaying modal. How can I resolve this error please help me.
URL:
http://newseinstein.com/Rwork/index.php/Pet/view/104
HTML:
<span class="text">
Report
</span>
Modal Code:
<div class="modal fade" id="locationreport" role="dialog" style="display: none;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
JS code:
$("#reportpet").click(function(){
$("#locationreport").show();
})

Change your data-target to data-target="#locationreport" you need to add # before the id of the modal
<span class="text">
Report
</span>
See bootply

After modal dismiss some functions are not working

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&sol;01&sol;2017</p><br><br>
</div>
<div class="moreinfodone" id="NewGame" style="display: none">
<p class="person">Player 1&colon; Pirulo</p>
<p class="person">Player 2&colon; Zultano</p>
<p class="person">Player 3&colon; 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!

editing a textarea value after posting a task on JS

im creating a task managment system and created a div which all tasks created by the user will append to right here:
</div><div id="ar_notes" class="ar_wrapper">
<button data-toggle="modal" data-target="#myModal" id="add_apt" ><i class="fa fa-pencil"></i></button>
</div>
and bootstrap modal that posts tasks right here:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<ul class="rslides">
<textarea id="put_note" autofocus></textarea>
<input onClick="addmore()" data-dismiss="modal" id="add_note" type="submit" value="הוסף משימה">
</ul>
</div>
</div>
</div>
</div>
this is my script that appends my notes on to the wrapping div:
function addmore() {
var newText = $('textarea').val();
$('#ar_notes').append('<br />');
$('#ar_notes').append('<article><div class="note"><p class="show_note">' +newText +'</p><button><i class="fa fa-trash-o"></i></button>').fadeIn(500);
$('textarea').filter('[id*=put_note]').val('');
}
my question is if i can click on the div of the task and get the modal with the same text in it to edit the task?
thanks!

Call another modal when radio checked

I have 2 modal window, written in bootstrap. When I click in first modal on radio, I want to close this modal and then open another.
My html for first form:
<div class="modal fade" id="overlay" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Can we help?</h4>
</div>
<div class="modal-body">
<label for="callback">Callback</label>
<input type="radio" id="callbackRadio">
<label for="contactUs">Contact Us</label>
<input type="radio" id="contactUsRadio">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
My JS code:
if($('#contactUsRadio').is('checked')){
$('#overlay').modal('hide');
$('#contactUsModal').modal('show');
}
But it doesn't work.

need to trigger an event (assuming you aren't, as you haven't pasted that in with your code)
$('#contactUsRadio').on('click', function() {
if($('#contactUsRadio').is(':checked')) {
$('#overlay').modal('hide');
$('#contactUsModal').modal('show');
}
});