Develop Reference

Modal does not close

When pressing the "Confirm" button, it executes the function and the action, but the event of closing the modal does not execute it.
This is my code:
<script type="text/javascript">
$("document").ready(function() {
var actsel = $("#act_selected").val();
$("#habilitaract_mensaje").html("¿You want to end the activity No. <strong>" + actsel + "</strong>?");
$("#btn_actconfirmar").click(function() {
if (habHabitacion()) {
$('#modal_habilitaract').modal('hide');
}
});
});
</script>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">Enable Activity</h4>
</div>
<div class="modal-body">
<h5><span id="habilitaract_mensaje"></span></h5>
<br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btn_actconfirmar">
<span class="texto-sm"><span class="glyphicon glyphicon-ok"></span> Confirm</span>
</button>
</div>

I think the problem comes from your import of bootstrapp or the definition of the div of the modal
Look at mine:it works correctly
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {
var actsel = $("#act_selected").val();
$("#habilitaract_mensaje").html("¿You want to end the activity No. <strong>" + actsel + "</strong>?");
$("#btn_actconfirmar").click(function() {
alert("welcome");
});
});
</script>
<div align="right">
<button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add</button>
</div>
<div id="add_data_Modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×
</span></button>
<h4 class="modal-title">Enable Activity</h4>
</div>
<div class="modal-body">
<h5><span id="habilitaract_mensaje"></span></h5>
<br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btn_actconfirmar">
<span class="texto-sm"><span class="glyphicon glyphicon-ok"></span> Confirm</span>
</button>
</div>
</div>
</div>
</div>

If habHabitacion function returns boolean true then modal window should be close. Please check what habHabitacion return.

give user options when clicking on bootstrap button

echo "<button type='button' class='btn btn-danger btn-xs glyphicon glyphicon-remove-circle'></button>";
The button above loads delete.php
When the user clicks on the button i want to display a yes/no window. If the user clicks yes, it needs to load the delete.php(with id info). When click no it needs to load an other php file.
what is a good way to do this? i have tried using JavaScript but can't get it to work.

1st no need to add a button inside a link, just style the link:
echo "<a href=\"delete.php?id=$result[exportid]\" class='btn btn-danger btn-xs glyphicon glyphicon-remove-circle delete-button'></a>";
Then attach to the buttons click event in javascript (jquery) and show a confirmation:
$(function(){
$('a.delete-button').click(ev){
ev.preventDefault();
var deleteUrl = $(this).attr('href');
var otherUrl = 'some other url';
if(confirm('Are you sure you want to delete this item')){
window.location = deleteUrl;
}else{
window.location = otherUrl;
}
}
});

You could easily make your confirm dialog like following:
<!-- Modal dialog -->
<div class="modal fade" id="myForm" tabindex="-1">
<!-- CUTTED -->
<div id="step1" class="modal-footer">
<button type="button" class="glyphicon glyphicon-erase btn btn-default" id="btnDelete"> Delete</button>
</div>
</div>
<!-- Modal confirm -->
<div class="modal" id="confirmModal" style="display: none; z-index: 1050;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body" id="confirmMessage">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="confirmOk">Ok</button>
<button type="button" class="btn btn-default" id="confirmCancel">Cancel</button>
</div>
</div>
</div>
</div>
File .js:
$('#btnDelete').on('click', function(e){
confirmDialog(YOUR_MESSAGE_STRING_CONST, function(){
//My code to delete
});
});
function confirmDialog(message, onConfirm){
var fClose = function(){
modal.modal("hide");
};
var modal = $("#confirmModal");
modal.modal("show");
$("#confirmMessage").empty().append(message);
$("#confirmOk").one('click', onConfirm);
$("#confirmOk").one('click', fClose);
$("#confirmCancel").one("click", fClose);
}
Using one instead of on prevents that the removal function is invoked at the next opening of the dialog.
I hope this could be helpful.
Follow a complete text example:
var YOUR_MESSAGE_STRING_CONST = "Your confirm message?";
$('#btnDelete').on('click', function(e){
confirmDialog(YOUR_MESSAGE_STRING_CONST, function(){
//My code on OK click
});
});
function confirmDialog(message, onConfirm){
var fClose = function(){
modal.modal("hide");
};
var modal = $("#confirmModal");
modal.modal("show");
$("#confirmMessage").empty().append(message);
$("#confirmOk").one('click', onConfirm);
$("#confirmOk").one('click', fClose);
$("#confirmCancel").one("click", fClose);
}
<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"/>
<!-- Modal dialog -->
<div id="frmTest" tabindex="-1">
<!-- CUTTED -->
<div id="step1" class="modal-footer">
<button type="button" class="glyphicon glyphicon-erase btn btn-default" id="btnDelete"> Delete</button>
</div>
</div>
<!-- Modal confirm -->
<div class="modal" id="confirmModal" style="display: none; z-index: 1050;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body" id="confirmMessage">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="confirmOk">Ok</button>
<button type="button" class="btn btn-default" id="confirmCancel">Cancel</button>
</div>
</div>
</div>
</div>

Take a look at the Bootstrap Modal component. It does exactly what you need it to do.

Issue in passing a data id to bootstrap modal

I have a listing page containing a link button to show modal repeating in a PHP loop. I have searched and found these:
Passing data to a bootstrap modal, Passing data to Bootstrap 3 Modal and Pass id to Bootstrap modal and some others but failed.
What I want
I have fetched the data id from database and pass it to bootstrap modal and there I will use this id to display more info through MySQL queries.
I have written all the code but the ID is not passing to the modal.
Modal Link Button code
<a class="btn btn-warning btn-minier" href="#modal-form-show" role="button" data-toggle="modal" data-target="#myModal" data-id="<?php echo $cottage_id ?>"><i class="icon-edit bigger-120"></i> Reservation </a>
Modal code
<!-- Modal -->
<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>
<h4 class="modal-title">Reservation Details</h4><br>
<h5>Cottage Id :</h5>
<h5>Cottage Title :</h5>
</div>
<div class="modal-body">
<p>ID WILL SHOW IN THIS TEXT FIELD.
<input type="text" name="cottage" placeholder="cottage id" value="" id="cottage" />
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
JS code
$('#modal-form-show').on('show.bs.modal', function(e) {
var c_id= $('a[href="#modal-form-show"]').data('id');
//var c_id= $(this).data(id) - checked both
$("#cottage").val(c_id);
});
I have taken a text input in modal named cottage and I want show that id in this input.

Try this snippet:
$('.btn-minier').click(function(){
var c_id = $(this).attr('data-id');
$('#cottage').val(c_id);
});

I have change little , when button click show the popup & i've set the value of data-id=2
Button
<a class="btn btn-warning btn-minier" id="btnModalPopup" href="" role="button" data-toggle="modal" data-target="" data-id="2"><i class="icon-edit bigger-120"></i> Reservation </a>
I add button in you modal
<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>
<h4 class="modal-title">Reservation Details</h4><br>
<h5>Cottage Id :</h5>
<h5>Cottage Title :</h5>
</div>
<div class="modal-body">
<p>
ID WILL SHOW IN THIS TEXT FIELD.
<input type="text" name="cottage" placeholder="cottage id" value="" id="cottage" readonly />
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" data-dismiss="modal" id="btnSubmit">Submit</button>
</div>
</div>
</div>
</div>
Javascript code
<script>
$(document).ready(function () {
$('#btnModalPopup').click(function () {
var c_id = $(this).data('id');
console.log(c_id)
$('#myModal #cottage').val(c_id)
$('#myModal').modal('show')
});
$('#btnSubmit').click(function () {
alert('submit button click')
// get the id , from input field.
var id = document.getElementById('cottage').value;
console.log(id)
alert(id)
//You can set the id - to php variable - then hit to sever by ajax
})
});
</script>

Try using attr method of JQuery
$('#modal-form-show').on('show.bs.modal', function(e) {
// instead of this
//var c_id= $('a[href="#modal-form-show"]').data('id');
// try this one
var c_id= $('a[href="#modal-form-show"]').attr('data-id');
//var c_id= $(this).data(id) - checked both
$("#cottage").val(c_id);
});

Bootstrap modal is not triggering

I'm trying to create a Bootstrap modal as a requirement of my project, the problem is that I'm unable to trigger this modal using jQuery
this is the modal code:
<div class="container">
<!-- Trigger the modal with a button -->
<!--<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button> -->
<!-- Modal -->
<div class="modal fade" id="myModal" 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">
<p>Please choose if you want to open an existing ticket or to create a new one.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-toggle="modal">New Ticket</button>
<button type="button" class="btn btn-default" data-toggle="modal">Open Ticket</button>
</div>
</div>
</div>
</div>
</div>
And this is the button from which the modal should be triggered:
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" id="btnLogin" data-toggle="modal" data-target="#myModal" class="btn btn-success">Submit</button>
</div>
</div>
And finally this is the jQuery code:
<script>
$(document).ready(function () {
$("#btnLogin").click(function () {
alert("..");
$("#myModal").modal();
alert("..");
});
});
</script>
The problem is that the script code is not executing after triggering #myModal element
Any suggestion please?

Try this:
$("#myModal").modal('show');

use that you should put some parameter in .modal("hide") or .modal("show")
$("#myModal").modal("show");
and please use this button
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" id="btnLogin" class="btn btn-success">Submit</button>
</div>
</div>

You need to remove your javascript! There's no need for that...
Bootstrap will already open dialog reading the attributes data-toggle="modal" data-target="#myModal" on your button
So your javascript is causing the closure of modal right after it opens.
See this demo: JSFIDDLE

Try This:
<script>
$(document).ready(function () {
$("#btnLogin").click(function () {
$("#myModal").modal('toggle');
});
});
</script>

Here you go i already fix for you.
reminder always put jquery first after bootstrap.
Example
<script type='text/javascript' src='js/plugins/jquery/jquery.min.js'></script>
<script type='text/javascript' src='js/plugins/bootstrap/bootstrap.min.js'></script>
i don't know why you need to add that script
$(document).ready(function () {
$("#btnLogin").click(function () {
alert("..");
$("#myModal").modal();
alert("..");
});
});
DEMO

Passing image into bootstrap modal

Hello I have a list of images. User can click on any image and it will open a bootstrap modal. In this boostrap modal, I need the image, that the user clicked on, to appear.
Please, view my comments in the below code for more clarity.
Any help would greatly be appreciated. Thank you.
<center>
<div id="items" class="transitions-enabled">
<% #images.each do |image| %>
<div class="box panel panel-default">
<div class="square_item_image">
#HERE IS THE IMAGE I WANT TO APPEAR IN THE BOOSTRAP MODAL
<%= image_tag(image["images"]["low_resolution"]["url"]) %>
</div>
<div class="item_info">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Create Outfit</button>
</div>
</div>
<% end %>
</div>
</center>
<!-- Modal -->
<div class="modal fade" id="myModal" 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</h4>
</div>
<div class="modal-body">
#I WOULD LIKE THE IMAGE TO APPEAR HERE
<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>
</div>

by using javascript you can do it
JAVASCRIPT
$(document).on("click", ".open-AddImgDialog", function () {
var imgsrc = $(this).data('id');
$('#my_image').attr('src',imgsrc););
});
HTML code
<div class="item_info">
<button type="button" class="btn btn-info btn-lg open-AddImgDialog" data-id="img/img.jpg" data-toggle="modal" data-target="#myModal">Create Outfit</button>
</div>
MODAL Pop
<div class="modal-body">
<img id="my_image" />
</div>
Here data-id="img/img.jpg" is your image path and add class name open-AddImgDialog in button.

Is there one too many ";" in
$('#my_image').attr('src',imgsrc););
Should be:
$('#my_image').attr('src',imgsrc));