I’m using BootStrap
I open a modal(the modal is inside a file).
<div id="buy-function" class="modal fade" role="dialog">
<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></button>
<h4 class="modal-title" id="gridSystemModalLabel">Achat </h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form class="operation" role="form" method="post" >
<div class="form-group">
<label for="quantite" class="col-sm-3 control-label">Quantitée : </label>
<div class="col-sm-9">
<input type="number" class="form-control" id="buy_live_quantite" name="quantite" value="10" >
</div>
</div>
<div class="form-group">
<label for="justif" class="col-sm-3 control-label">Justification : </label>
<div class="col-sm-9">
<textarea rows="3" class="form-control" id="justif" name="justif"></textarea>
</div>
</div>
</form>
</div>
</div>
</div>
<!--<div class="modal-footer"></div>
<div id="live_invoice"></div>-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
<button type="button" id="new_operation" class="btn btn-info">Acheter</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I open a modal with a button.
<div class="box-body">
<button type="button" class="btn btn-block btn-info btn-lg" data-toggle="modal" data-target="#buy-function">Acheter</button>
<button type="button" class="btn btn-block btn-warning btn-lg" data-toggle="modal" data-target="#sell-function">Vendre</button>
</div>
However, when I want to close this modal
(I use
$('#buy-function').modal('hide'); ),
my script :
<script>
$(document).ready(function () {
$("button#new_operation").click(function(){
$.ajax({
type: "POST",
url: "/views/composants/new_operation.php", //process
data: $('form.operation').serialize(),
success: function(msg){
//alert(msg);
$('#buy-function').modal('hide'); //hide popup
},
error: function(){
alert("failure");
}
});
});
});
</script>
it doesn’t work. Any idea ?
Check that you are not including jQuery more than once. Bootstrap will apply it to the first instance only and when jQuery gets initiated again then it will be lost.
Related
I try to focus() an input in a Bootstrap modal, but nothing seems to work. I have tried the setTimeout and the tabindex fixes, but nothing.
Even when I run it in the console:
$("#inpProperty").focus();
$("#inpProperty")[0].focus();
it doesn't focus. I am using Firefox 53.0, 64 bit on Fedora.
This is the modal:
<div id="mdlAddProperty" 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>
<h4 class="modal-title">Create New Property</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger collapse" id="divAlert">
×
<span id="spnMessage"></span>
</div>
<p>Property Name:</p>
<p><input class="input" id="inpProperty" tabindex="1"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" tabindex="2" onclick="btnAddProperty_Click()">Create</button>
<button type="button" class="btn btn-default" tabindex="3" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Update it works one time in Chrome, zero times in Firefox.
If you need to focus it in just the beginnig you can add autofocus event on the html element you want to focus in.
<div id="mdlAddProperty" 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>
<h4 class="modal-title">Create New Property</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger collapse" id="divAlert">
×
<span id="spnMessage"></span>
</div>
<p>Property Name:</p>
<p><input class="input" id="inpProperty" tabindex="1" autofocus></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" tabindex="2" onclick="btnAddProperty_Click()">Create</button>
<button type="button" class="btn btn-default" tabindex="3" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
But if you want to do it with jQuery you need to surround your code with $(document).ready(function());
$(document).ready(function() {
$("#inpProperty").focus();
$("#inpProperty")[0].focus();
});
Here is the Bootstrap Modal events you can use:
Read more here: https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp
Also if you are running js at console you need use this(open modal first):
jQuery("#inpProperty").focus();
$(document).ready(function() {
$("#myBtn").click(function() {
$("#mdlAddProperty").modal("show");
});
$("#mdlAddProperty").on('shown.bs.modal', function() {
$("#inpProperty").focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h2>Modal Events - shown.bs.modal</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>
<!-- Modal -->
<div id="mdlAddProperty" 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>
<h4 class="modal-title">Create New Property</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger collapse" id="divAlert">
×
<span id="spnMessage"></span>
</div>
<p>Property Name:</p>
<p>
<input class="input" id="inpProperty" tabindex="1">
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" tabindex="2" onclick="btnAddProperty_Click()">Create</button>
<button type="button" class="btn btn-default" tabindex="3" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
I am using modal concept of bootstrap in my html file. In modal i am entering data after clicking on save this data should be displayed in html page where modal is called. By using which function i can include or display this data in html page.
Here's a working Plunker for your reference
The basic idea is that you can pass an object from a modal back to the controller which opens the modal with close() as follows
$uibModalInstance.close($ctrl.modal);
Then in the parent controller, you can obtain the object as follows
modalInstance.result.then(function(modal) {
$ctrl.modal = modal;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
I assume bootstrap "modal" style class used in the code to show popup from parent page. Here, JavaScript /jquery would help to update the content from modal div to other div in the same page.
Ex: https://jsfiddle.net/AMVijay/f46qLn8L/1/
HTML Content with Bootstrap and JQuery:
<form>
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputName" placeholder="Name" disabled>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
</div>
</div>
</form>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
<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></button>
<h4 class="modal-title" id="gridSystemModalLabel">Modal Title</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-4">
<input type="text" class="form-control" id="inputFirstName" placeholder="First Name" />
</div>
</div>
<div class="row">
<div class="col-md-4">
<input type="text" class="form-control" id="inputLastName" placeholder="Last Name" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="modalSaveButton" type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Java Script:
$(document).ready(function() {
$("#modalSaveButton").click(function() {
var fullName = $("#inputFirstName").val() + " " + $("#inputLastName").val();
console.log("Full Name :: " + fullName);
$("#inputName").val(fullName);
$('#myModal').modal('toggle');
});
});
So in bootstrap you cannot have a modal within a modal. I completely understand this. I have a modal that pops up from a button. I need a delete button inside that modal, that deletes the modal button. Any help? Any ideas? Thank you.
Here is a simple modal fiddle if needed: JSFiddle
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalHorizontal">Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<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>
<!-- Modal Body -->
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" />Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<!-- Modal Footer -->
<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>
Try adding an id to the modal you want to remove and the delete button.
In this example I used jquery to remove the button.
$('#delete-button').click(function() {
$('#delete_this').remove();
});
Updated jsfiddle
Instead of using the default jquery alert popup, I'd like to trigger a Bootstrap Modal. All the tutorials I've read, the modal is triggered by the click(function(){});. I'd like to have if triggered if a condition in my "if statement" is not met. Here is the code I have
var test1 = $('#test').val();
$('#go').click(function() {
if (test1 === "") {
alert("Please enter all values in the fields");
$('#myModal').modal('show');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="form-group">
<label for="test" class="col-sm-3 control-label">Test</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="test" placeholder="Enter A Value">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-6 col-sm-3">
<button type="button" id="go" class="btn btn-primary">Go</button>
</div>
</div>
<!--Modal-->
<div class="modal fade" id="#myModal">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</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>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!--End Modal-->
In your case, since the modal has an id of id="#myModal", you need to escape the # within the jQuery selector, $('#\\#myModal').modal('show'):
$('#go').click(function() {
var test1 = $('#test').val();
if (test1 === "") {
$('#\\#myModal').modal('show');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="form-group">
<label for="test" class="col-sm-3 control-label">Test</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="test" placeholder="Enter A Value">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-6 col-sm-3">
<button type="button" id="go" class="btn btn-primary">Go</button>
</div>
</div>
<!--Modal-->
<div class="modal fade" id="#myModal">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>Please enter all values in the fields.</p>
</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>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!--End Modal-->
Remove the '#' from the id and your code should work
<div class="modal fade" id="myModal">
I want to build Modal Window with cookie to display only once . I follow this tutorial http://calebserna.com/bootstrap-modal-email-subscription-form/ but still not working ? can anyone tell me how to fix it ? thanks .
here my website.http://cloudsblack.com/modalwindow.html
here my code .
<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">
<div class="heading heading-v1 margin-bottom-10">
<h2><strong><span class="color-orange">Modal Window</strong></span></h2>
</div>
</div>
<div class="modal-body">
<a class="btn btn-link" data-dismiss="modal">Close</a>
</div>
<div class="modal-footer">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if ($.cookie(‘pop’) == null) {
$(‘#myModal’).modal(‘show’);
$.cookie(‘pop’, ’7′);
}
});
</script>
Hi I'm here to answer my own question , I found these code its work ! thanks .
<!-- 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" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Subscription Form Demo</h4>
<p>This is Bootstrap Modal popup example.</p>
</div>
<div class="modal-body">
<!--End mc_embed_signup-->
<!-- Begin MailChimp Signup Form -->
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" value="" name="EMAIL" class="required email form-control" id="mce-EMAIL"/>
</div>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_9e279011b21a23e1aed5e4868_cca4394bc9" value=""/></div>
<div class="form-group remove-bottom">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-default"/>
</div>
</div>
</form>
<!--End mc_embed_signup-->
</div>
<div class="modal-footer remove-top">
<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>
<!--============================================================= MODAL WINDOW END=================================================================-->
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$('.bs-docs-sidebar').affix({
offset: {
top: 10
}
})
if ($.cookie('pop') == null) {
$('#myModal').modal('show');
$.cookie('pop', '7');
}
});
$(function($) {
$('#deleteCookie').click(function() {
$.cookie('pop', null);
window.location.reload();
});
});
</script>