How can I get button value in textbox of model pop up? - javascript

I have dynamic buttons
when I click on button a popup should appear with a textbox.
My button code is
echo '<button type="submit" class="btn btn-success" data-toggle="modal" data-target="#myModal" value='.$row['country_id'].' id="update" >Update</button>';
My jQuery code is
<script>
$(document).ready(function(){
$("#update").click(function(){
var butval = $("#update").val();
$("#ctext").val(butval);
});
});
Modal popup is
<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">Modal Header</h4>
</div>
<div class="modal-body">
<input type="text" id="ctext" value="<?php ;?>">
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-default" name="update">
</div>
</div>
</div>
</div>

For this kind of case , You must use data attribute of HTML5.
echo '<button type="submit" class="btn btn-success" data-toggle="modal" data-target="#myModal" data-btn="'..$row['country_id']..'" value='.$row['country_id'].' id="update" >Update</button>';
And in the Modal popup,
Here is the magic script that will solve your problem.
<script>
$(document).ready(function(){
$("#update").click(function(){
// this is the value you get which is in data attribute of update button.
var btn_value= $(this).data('btn');
$('#myModal')
.find('#ctext').val(btn_value).end()
.modal('show');
});
</script>

Updated for multiple buttons using class: You can try the below. first remove data-target="#myModal" from button then get the value and write it to input then open the modal:
$(document).ready(function(){
$(".update").click(function(){
var butval = $(this).val();
$("#ctext").val(butval);
$("#myModal").modal('show');
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="submit" class="btn btn-success update" value='2' >Update</button>
<button type="submit" class="btn btn-success update" value='3' >Update</button>
<!-- see the button attributes changes -->
<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">Modal Header</h4>
</div>
<div class="modal-body">
<input type="text" id="ctext" >
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-default" name="update">
</div>
</div>
</div>
</div>

#suchit Thanks for your help.
this code is working
<button type="submit" class="btn" data-toggle="modal" value='.$row['country_name'].' id='.$row['country_name'].' >Update</button>;
<script>
$(document).ready(function(){
$(".btn").click(function(){
var butval = this.id;
$("#ctext").val(butval);
$("#myModal").modal('show');
});
});
} );
</script>

Related

Access input text field inside Bootstrap Modal using JQuery .find()

I am trying to access the text which is entered into the input box but it keeps returning an empty string
Can someone help resolve the issue?
$('#my_modal').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget).data('id');
var txt = $(this).find('input[id="txt"]').val();
$(this).find('button[id="save"]').click(function() {
alert(id);
alert(txt);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Edit
<div class="modal" id="my_modal">
<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">Click Save!</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="txt" class="control-label">Text:</label>
<input id="txt" class="form-control" autofocus="autofocus" placeholder="1000"/>
</div>
</div>
<div class="modal-footer">
<button id="save" type="save" class="btn btn-primary" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You are trying to access the input value on modal showing, when actually the value is empty. You should access the value inside the click handler function of the button.
Please Note: this differs based on the context on which they are executing, thus modal click and button click has their own this. In order to preserve the intended this (the modal) you can store that in a variable and use that afterwards.
$('#my_modal').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget).data('id');
var that = $(this);
$(this).find('button[id="save"]').click(function() {
var txt = that.find('input[id="txt"]').val();
alert(id);
alert(txt);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Edit
<div class="modal" id="my_modal">
<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">Click Save!</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="txt" class="control-label">Text:</label>
<input id="txt" class="form-control" autofocus="autofocus" placeholder="1000"/>
</div>
</div>
<div class="modal-footer">
<button id="save" type="save" class="btn btn-primary" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You were showing the value you had recovered before onClick. Retrieving the value within onClick will resolve
$('#my_modal').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget).data('id');
var txt = $(this).find('input[id="txt"]');
$(this).find('button[id="save"]').click(function() {
alert(id);
alert(txt.val());
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Edit
<div class="modal" id="my_modal">
<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">Click Save!</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="txt" class="control-label">Text:</label>
<input id="txt" class="form-control" autofocus="autofocus" placeholder="1000"/>
</div>
</div>
<div class="modal-footer">
<button id="save" type="save" class="btn btn-primary" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Bootstrap Modal - Unable to collect attr from relatedTarget?

I have a PHP loop that creates a series of buttons with unique data attributes. When these buttons are clicked they open a modal which collects the values of the data attributes on the button, and uses them to prepopulate the form. Can be seen here: https://getbootstrap.com/docs/3.3/javascript/#modals-related-target
The modal opens, but doesn't display the data I'm trying to collect. I also cannot get core functions such as alert(); to work.. and I'm lost.
I have tried using jQuery's data() and the relevant data attributes, but when they also didn't work I stuck to using attr().
Can anyone help?
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-1" data-clientcode="VCDE" data-checkid="7" data-checkname="Check 1" data-target="#comment-modal">
Add Comment
</button>
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-2" data-clientcode="VAM" data-checkid="7" data-checkname="Check 2" data-target="#comment-modal">
Add Comment
</button>
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-3" data-clientcode="VAM" data-checkid="7" data-checkname="Check 3" data-target="#comment-modal">
Add Comment
</button>
<div id="comment-modal" class="modal fade" 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 check-comment-title" id="myModalLabel"></h4>
</div>
<div class="modal-body check-comment-body">
<label for="clientid" class="control-label">Client ID:</label>
<input type="text" class="form-control" id="clientid" disabled="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success">Save Comment</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
// This alert doesn't run for some reason.
// console.log doesn't work either, but the modal works...
alert();
$('#comment-modal').on('show.bs.modal', function(event) {
var modal = $(this);
var button = $(event.relatedTarget); // btn that triggered the modal
var client = button.attr('data-clientcode');
var checkid = button.attr('data-checkid');
var checkname = button.attr('data-checkname');
modal.find('.modal-title').text('Comment submission for ' + client)
modal.find('.modal-body .check-comment-body').html(checkname);
modal.find('.modal-body input').val(checkid);
)}
});
</script>
It seems you have an error in your code. Try this:
$(function(){
// This alert doesn't run for some reason.
// console.log doesn't work either, but the modal works...
$('#comment-modal').on('show.bs.modal', function(event) {
var modal = $(this);
var button = $(event.relatedTarget); // btn that triggered the modal
var client = button.attr('data-clientcode');
var checkid = button.attr('data-checkid');
var checkname = button.attr('data-checkname');
modal.find('.modal-title').text('Comment submission for ' + client)
modal.find('.modal-body .check-comment-body').html(checkname);
modal.find('.modal-body input').val(checkid);
})
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-1" data-clientcode="VCDE" data-checkid="7" data-checkname="Check 1" data-target="#comment-modal">
Add Comment
</button>
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-2" data-clientcode="VAM" data-checkid="8" data-checkname="Check 2" data-target="#comment-modal">
Add Comment
</button>
<button type="button" class="btn btn-sm btn-info" data-toggle="modal" id="ABC-3" data-clientcode="VAM" data-checkid="9" data-checkname="Check 3" data-target="#comment-modal">
Add Comment
</button>
<div id="comment-modal" class="modal fade" 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 check-comment-title" id="myModalLabel"></h4>
</div>
<div class="modal-body check-comment-body">
<label for="clientid" class="control-label">Client ID:</label>
<input type="text" class="form-control" id="clientid" disabled="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success">Save Comment</button>
</div>
</div>
</div>
</div>

Using modal in isset PHP

I am trying to open a modal when submit is clicked in the table .
I tried to change the animation to fadeIn because using fade the modal shows only flash.
The result when I use the fadeIn the modal appears but in split second and I did not include any timers or refresh in the whole page.
Can I have a sample code to show the modal and set the conditions in
if(isset($_POST['pending'])) { ...alert ..}
or please comment suggestions for this.
Because I am unable to use and view the modal properly.
Note: It has a bootstrap for the modal and jquery but I did not include here in the post
while($record = mysql_fetch_array($myData))
{
echo "<form action='dir_1.php' method='POST'>";
echo "<tr>";
echo '<td><input type="submit" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" /></td>';
echo "</tr>";
echo "</form>";
}
if(isset($_POST['pending'])){
echo('
<div class="modal fadeIn" 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">Modal Header</h4>
</div>
<div class="modal-body">
<h2>Enter your First and Last Name</h2>
<form action="submit_prompt.php" method="post">
<p><strong>First Name:</strong><br />
<input type="text" name="notes" id="input1"/></p>
<input type="submit" name="submit" value="Add" />
</div>
<div class="modal-footer">
<input type="submit" name="submit" value="Add" />
<button type="button" onclick="play()" class="btn btn-default" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
');
}
Have you tried triggering with JavaScript:
<?php if(isset($_POST['pending'])) { ?>
<script>
$( document ).ready(function() {
$('#myModal').modal('show')
});
</script>
<?php } ?>
Quick Browser test, testmodal.php:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="modal fadeIn" 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">Modal Header</h4>
</div>
<div class="modal-body">
<h2>Enter your First and Last Name</h2>
<form action="submit_prompt.php" method="post">
<p><strong>First Name:</strong><br />
<input type="text" name="notes" id="input1"/></p>
<input type="submit" name="submit" value="Add" />
</div>
<div class="modal-footer">
<input type="submit" name="submit" value="Add" />
<button type="button" onclick="play()" class="btn btn-default" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<?php if(isset($_GET['pending'])) { ?>
<script>
$( document ).ready(function() {
$('#myModal').modal('show')
});
</script>
<?php } ?>
In the browser:
http://your-domain/testmodal.php?pending=fakevar

How can you pull a PHP value from a table row in JQuery to use later?

I have a Button that gets populated with ever row in the table. I want to be able to put the value of the row "$row[auditID]" and use it in my modal to be able to make this delete button work. The alert pops up, but the Modal won't hide and my delete action doesn't work (doesn't delete the audit).
<a href=\"#\" id=\"$row[auditID]\" class='btn btn-danger btn-xs' role='button' data-toggle='modal' data-target='#question_alert' Title=\"Remove\" >Remove</span> </a>";
<!-- modal pop up for Deleting a audit -->
<div class="modal fade" style="z-index:10000" id="question_alert" role="dialog">
<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">Audit Delete Confirmation</h4>
</div>
<div class="modal-body"id="myModal1">
<h3>Are you sure you want to <strong>DELETE</strong> this Audit? You will not be able to get it back.</h3>
</div>
<div class="modal-footer">
<form method = "POST">
<input type="button" id="yes_delete" value="Yes " name="deleteaudit" />
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</form>
</div>
</div>
</div>
</div>
JQuery Script:
<script>
$("#yes_delete").click(function(){
var auditID = this.id;
//alert("delete test");
$.post("edit_audits.php?action=delete&auditID="+auditID,{
function(data){
alert("Audit Deleted");
$('question_alert').modal('hide');
window.location.reload();
}
});
});
</script>
Something like this?
Put your PHP value into the a tag like this:
<a href="#" data-mylink="<?php echo $yourPHPVar; ?>" class='btn btn-danger btn-xs' role='button' data-toggle='modal' data-target='#question_alert' Title="Remove" ><span>Remove</span> </a>
jsFiddle Demo
$('#question_alert').on('shown.bs.modal', function (e) {
var btn = $(e.relatedTarget);
var linked = btn.data('mylink');
$('#audNo').text(linked);
// Or:
// var modal = $(this);
// modal.find('.modal-body h3 span#audNo').text(linked);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<a href="#" id="bob" data-mylink="Fred" class='btn btn-danger btn-xs' role='button' data-toggle='modal' data-target='#question_alert' Title="Remove" ><span>Remove</span> </a>
<!-- modal pop up for Deleting a audit -->
<div class="modal fade" style="z-index:10000" id="question_alert" role="dialog">
<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">Audit Delete Confirmation</h4>
</div>
<div class="modal-body"id="myModal1">
<h3>Are you sure you want to <strong>DELETE</strong> Audit number <span id="audNo"></span>? You will not be able to get it back.</h3>
</div>
<div class="modal-footer">
<form method = "POST">
<input type="button" id="yes_delete" value="Yes " name="deleteaudit" />
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</form>
</div>
</div>
</div>
</div>
I would do something like this
<a href="javascript:void(0)" class='btn btn-danger btn-xs btn-remove' data-id="<?=$row["auditID"]?>" role='button' data-toggle='modal' data-target='#question_alert' Title="Remove" >Remove</span></a>
<!-- modal pop up for Deleting a audit -->
<div class="modal fade" style="z-index:10000" id="question_alert" role="dialog">
<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">Audit Delete Confirmation</h4>
</div>
<div class="modal-body"id="myModal1">
<h3>Are you sure you want to <strong>DELETE</strong> this Audit? You will not be able to get it back.</h3>
</div>
<div class="modal-footer">
<form method = "POST">
<input type="button" id="yes_delete" value="Yes " name="deleteaudit" />
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</form>
</div>
</div>
</div>
</div>
And This in The jQuery function. Make sure you put your jQuery script tag at the top of the page for jQuery to load before this function
<script>
var removeId = null;
$(document).ready(function(){
$(".btn-remove").click(function(){
removeId = $(this).attr("data-id");
});
$("#yes_delete").click(function(){
$.ajax({
url: "edit_audits.php",
type: "POST",
data: "action=delete&auditID="+removeId,
success: function(){
$('#question_alert').modal('hide');
window.location.reload();
}
});
}
});
Keep in mind, I have not ran this as I don't have all the data needed. You may have to debug this a little as it was blind coding.

bootstrap modal detecting which button is pressed when the modal content is a link href

I'm having an issue with detecting which button is pressed in a modal window, when the modal content is from a link href. My real code is all php dynamically generated, but I've included a simple example below using html.
I know that when you use the modal with the href it replaces all the 'modal-content' and therefore I'm guessing that my buttons that are coming from the href are somehow not named what I think or something like that.
Sadly I'm pretty new at this and spent ages yesterday trying to figure this out and haven't managed to get it working. So any help is greatly appreciated.
button.html :-
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style type="text/css">
</style>
<title>Modal Button test with it loading another page (so some php code)</title>
<script type='text/javascript'>
$(window).load(function(){
$('#myModal .modal-footer button').on('click', function (e) {
var $target = $(e.target);
$(this).closest('.modal').on('hidden.bs.modal', function (e) {
alert('The buttons id that closed the modal is: #' + $target[0].id);
});
});
});
</script>
</head>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" method="post" id="modal_form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title main</h4>
</div>
<div class="modal-body">
<p>Some text from the modal code in the main html<p>
</div>
<div class="modal-footer">
<button type="button" name="in_reserve1" id="confirm-cancel-button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" name="in_reserve2" id="confirm-save-button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
<a type="button" href="modal.html" class="btn btn-info btn-lg" data-toggle="modal" data-id="reservedb" data-target="#myModal">Doesn't Work</a>
<!-- <a type="button" class="btn btn-info btn-lg" data-toggle="modal" data-id="reservedb" data-target="#myModal">Works</a> -->
The commented out button correct detects which button closes the modal.
However, when you run the one with the href it doesn't work.
modal.html is :-
<form class="form-horizontal" method="post" id="modal_form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title url</h4>
</div>
<div class="modal-body">
<p>Some text from the modal code in the href url<p>
</div>
<div class="modal-footer">
<button type="button" name="in_reserve1" id="confirm-cancel-button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" name="in_reserve2" id="confirm-save-button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
</div>
</form>
So hopefully someone will point me in the right direction to get this sorted.
Thanks.
The buttons in the modal are completely yours (They are not generating in the script so you can do with them whatever you want).
So, for the cancel button, you can leave the data-dismiss="modal".
To the save button you can call your code and when you done, call to hide method.
Example:
$('#confirm-save-button').on('click', function() {
alert('Saved!!');
$('#myModal').modal('hide');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- 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">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>
<button type="button" name="in_reserve2" id="confirm-save-button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

Categories