How can i show my modal when i click submit?
The output is success without modal but if i use modal popup its show nothing.
This is my body html
<form action="" method="post">
<div class="row">
<div class="offset-4 col-sm-8 mt-5">
<input type="checkbox" name="hobby[]" value="Sepak Bola"> Sepak Bola <br>
<input type="checkbox" name="hobby[]" value="Membaca"> Membaca <br>
<input type="checkbox" name="hobby[]" value="Menulis"> Menulis <br>
<input type="checkbox" name="hobby[]" value="Memancing"> Memancing <br>
</div>
</div>
<div class="row">
<div class="offset-5 col-sm-7">
<input type="submit" name="proses" class="btn btn-primary" value="Proses" data-toggle="modal" data-target="#exampleModal">
</div>
</div>
</form>
this is my modal show :
<!-- AWAL MODAL -->
<div class="modal fade" id="exampleModal" 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">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 class="row">
<div class="offset-4 col-sm-8 mt-5">
<h3>OUTPUT : </h3>
<?php
if (isset($_POST['proses'])) :
if (!empty($_POST['hobby'])) :
foreach ($_POST['hobby'] as $selected) :
echo $selected . "</br>";
endforeach;
endif;
endif;
?>
</div>
</div>
</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>
<!-- AKHIR MODAL -->
my modal just don't submit the information
ok, as you whant, here is the modal showing the values:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myModal1" class="modal fade" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p id="checkid"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<form>
<h3>Please select:</h3>
<div class="row">
<div class="offset-4 col-sm-8 mt-5">
<input type="checkbox" name="values" value="Sepak Bola"> Sepak Bola <br>
<input type="checkbox" name="values" value="Membaca"> Membaca <br>
<input type="checkbox" name="values" value="Menulis"> Menulis <br>
<input type="checkbox" name="values" value="Memancing"> Memancing <br>
</div>
</div>
</form>
<button id = "button1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1" >modal</button>
</body>
</html>
<script>
$(document).ready(function(){
$("#button1").click(function() {
var p=$("#myModal1 #checkid");
$(p).html("you have selected:");
$.each($("input[name='values']:checked"), function() {
$(p).html($(p).html() + '<br>' + $(this).val());
});
});
});
</script>
Related
I work Laravel application we display data on datatable. When we update data using Bootstrap modal box using foreach then only fetch last data in the table.
Button where we link:
#foreach($patients as $patient)<br>
<li>
<button type="button"
class="btn btn-primary btn-sm"
data-toggle="modal"
data-target="#myModal{{$patient->patient_id}}">Update Fee</button>
</li>
#endforeach
Modal box:
<div id="myModal{{$patient->patient_id}}" class="modal fade" 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"><span class="glyphicon glyphicon-edit"></span> Edit Fee</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label> Total Fee</label>
<input type="text" name="fee" class="form-control" readonly value="{{$patient->Fee->Fee}}" />
<input type="hidden" name="id" class="form-control">
</div>
</form>
</div>
</div>
</div>
</div>
Just insert your modal inside #foreach directive (your loop) and that should work on your current code.
#foreach($patients as $patient)<br>
<li>
<button type="button"
class="btn btn-primary btn-sm"
data-toggle="modal"
data-target="#myModal{{$patient->patient_id}}">Update Fee</button>
</li>
<div id="myModal{{$patient->patient_id}}" class="modal fade" 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"><span class="glyphicon glyphicon-edit"></span> Edit Fee</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label> Total Fee</label>
<input type="text" name="fee" class="form-control" readonly value="{{$patient->Fee->Fee}}" />
<input type="hidden" name="id" class="form-control">
</div>
</form>
</div>
</div>
</div>
#endforeach
I have some rows shown in a table (each one is a row of the related model database table). For each row I show a button that shows a modal asking for confirmation to delete it.
[https://i.stack.imgur.com/tSquD.png][1]
[https://i.stack.imgur.com/gGhSO.png][2]
The modal code is a blade template.
For a table with a single row, i have no problem. I can pass the id as variable to the modal. But i dont know how to send the selected one (logically, its including the modal with the last value of the $subnet var).
What would be the correct way to achieve this?
...
#foreach($subnets as $subnet)
<tr>
<td>{{$subnet->name}}</td>
<td><button type="button" class="btn-xs btn-primary">Edit</button><button type="button" class="btn-xs btn-primary" data-toggle="modal" data-target="#deleteSubnet">Delete</button></td>
</tr>
#endforeach
#include('inc.modals.modal_deleteSubnet',['subnet' => $subnet])
...
<div class="modal fade" id="deleteSubnet" tabindex="-1" role="dialog" aria-labelledby="deleteSubnetLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="deleteSubnetLabel">Delete subnet</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form action="/subnets/{{$subnet->id}}" method="POST">
#csrf
#method('DELETE')
<p>Are you sure you want to delete this subnet ({{$subnet->name}})?<p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<span class="pull-right">
<input class="btn btn-primary" type="submit" value="Delete">
</span>
</form>
</div>
</div>
</div>
</div>
[1]: https://i.stack.imgur.com/tSquD.png
[2]: https://i.stack.imgur.com/gGhSO.png
In your form add a bind id
#foreach($subnets as $subnet)
<tr>
<td>{{$subnet->name}}</td>
<td>
<button type="button" class="btn-xs btn-primary" data-id="{{$subnet->id}}">Edit</button>
<button type="button" class="btn-xs btn-primary" data-id="{{$subnet->id}}" data-toggle="modal" data-target="#deleteSubnet">Delete</button>
</td>
</tr>
#endforeach
Add a "id" in your form to get in jquery. <form method="POST id="formId">
$(document).ready(function () {
// you can add a better validation to button like a ID or class
$("button").each(function () {
$(this).onClick(function () {
var action = "/subnets/" + $(this).data().id;
$("#formId").attr("action", action);
});
});
});
You might wanna check this section on Bootstrap's website.
In your case this could be translated to:
Add data-id="{{ $subnet->id }}" to your button.
<button type="button" class="btn-xs btn-primary">Edit</button><button type="button" class="btn-xs btn-primary" data-toggle="modal" data-target="#deleteSubnet" data-id="{{ $subnet->id }}">Delete</button>
Add this jQuery snippet.
$('#deleteSubnet').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var id = button.data('id')
var modal = $(this)
modal.find('form').attr('action', '/subnets/' + id)
})
Without any javascript workarounds:
<button ... data-target="#deleteSubnet-{{ $subnet->id }}">Delete</button>
....
<div class="modal fade" id="deleteSubnet-{{ $subnet->id }}" ... >
....
</div>
Should work fine
<div class="modal fade" id="AddEditModal" role="dialog" ng-show="showEditModal">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button" ng-click="loadDetails()">
×
</button>
<h4 class="modal-title" ng-show="newType">Employee - New</h4>
<h4 class="modal-title" ng-hide="newType">Employee - Edit</h4>
</div>
<form class="form-horizontal" name="employeeForm" ng-submit="saveEmployee(detail,employeeForm.$valid)">
<div class="modal-body">
<p>
<div ng-repeat="error in errors">
<div class="alert alert-danger">
<button class="close" data-dismiss="alert">× </button>
<i class="fa fa-times-circle"></i>
{{error}}
</div>
</div>
</p>
<div class="row">
<div class="form-group required" ng-class="{ 'has-error' : employeeForm.EmpCode.$invalid && !employeeForm.EmpCode.$pristine }">
<label class="col-sm-4 control-label" for="EmpCode"><b>Employee Code:</b> </label>
<div class="col-sm-6">
<input class="form-control" type="text" name="EmpCode" ng-model="detail.EmpCode" required>
<p ng-show="employeeForm.EmpCode.$invalid && !employeeForm.EmpCode.$pristine" class="help-block">Employee is required.</p>
</div>
</div>
<div class="form-group required" ng-class="{ 'has-error' : employeeForm.FirstName.$invalid && !employeeForm.FirstName.$pristine }">
<label class="col-sm-4 control-label" for="FirstName"><b>First Name :</b> </label>
<div class="col-sm-6">
<input class="form-control" type="text" name="FirstName" ng-model="detail.FirstName" required>
<p ng-show="employeeForm.FirstName.$invalid && !employeeForm.FirstName.$pristine" class="help-block">First Name is required.</p>
</div>
</div>
<div class="form-group required" ng-class="{ 'has-error' : employeeForm.LastName.$invalid && !employeeForm.LastName.$pristine }">
<label class="col-sm-4 control-label" for="LastName"><b>Last Name :</b> </label>
<div class="col-sm-6">
<input class="form-control" type="text" name="LastName" ng-model="detail.LastName" required>
<p ng-show="employeeForm.LastName.$invalid && !employeeForm.LastName.$pristine" class="help-block">Last Name is required.</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="submit" ng-show="newType" ng-disabled="employeeForm.$invalid">
<i class="fa fa-save"></i>
Save
</button>
<button class="btn btn-success" type="submit" ng-hide="newType" ng-disabled="employeeForm.$invalid">
<i class="fa fa-save"></i>
Save Changes
</button>
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="removeFormDetails()"><i class="fa clip-close-3"></i>Close</button>
</div>
</form>
</div>
</div>
</div>
<!--Delete Section-->
<div class="modal fade" id="deleteModal" role="dialog" ng-show="showDeleteModal">
<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">Delete</h4>
</div>
<div class="modal-body">
<p>Do you really want to delete this User?</p>
</div>
<div class="modal-footer">
<button class="btn btn-bricky" type="button" ng-click="deleteEmployee(detail)">
<i class="fa fa-trash-o"></i>
Delete
</button>
<button class="btn btn-green" data-dismiss="modal" type="button" ng-click="removeFormDetails()">
<i class="fa clip-close-3"></i>
Close
</button>
</div>
</div>
</div>
</div>
Im working in a laravel project and I can use a button in order to show a modal and I have a delete button inside this modal and is working using botstrap 3 but is not working using bootrsap 4. ¨
This is my html code,
these CDN are working:
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
and when I use these cdn my delete button inside my modal doesnt work anymore:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
My modal:
<div id="deleteModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-cliente">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-orden_de_compra"></h4>
</div>
<div class="modal-body">
<h3 class="text-center">¿Estas seguro de que quieres eliminar este pedido?</h3>
<br />
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="id">id:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="id_delete" disabled>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="orden_de_compra">Orden de compra:</label>
<div class="col-sm-10">
<input type="name" class="form-control" id="orden_de_compra_delete" disabled>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-danger delete" data-dismiss="modal">
<span id="" class='glyphicon glyphicon-trash'></span> Delete
</button>this delete button doesnt work with Bootstrap 4 but is working with bootstrap 3
<button type="button" class="btn btn-warning" data-dismiss="modal">
<span class='glyphicon glyphicon-remove'></span> Close
</button>
</div>
</div>
</div>
</div>
</div>
My js:
<script type="text/javascript">
// delete a post
$(document).on('click', '.delete-modal', function() { //this function works with bootstrap 4
$('.modal-orden_de_compra').text('Delete');
$('#id_delete').val($(this).data('id'));
$('#orden_de_compra_delete').val($(this).data('orden_de_compra'));
$('#deleteModal').modal('show');
id = $('#id_delete').val();
orden_de_compra = $('#orden_de_compra_delete').val();
alert(id);
});
$('.modal-footer').on('click', '.delete', function() { //this function doesnt work with bootstrap 4
$.ajax({
type: 'DELETE',
url: 'posts/' + id,
data: {
'_token': $('input[name=_token]').val(),
},
success: function(data) {
toastr.success('Pedido eliminado exitosamente!', 'Notificación', {timeOut: 5000});
$('.item' + data['pedido_id']).remove();
alert('.item' + data['pedido_id']);
}
});
});
</script
Okay... I will do both snippets for you to see the difference.
BS3:
$('.modal-footer').on('click', '.delete', function() {
console.log("I'm here.");
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>
<button type="button" data-toggle="modal" data-target="#deleteModal">Open Modal</button>
<div id="deleteModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-cliente">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-orden_de_compra"></h4>
</div>
<div class="modal-body">
<h3 class="text-center">¿Estas seguro de que quieres eliminar este pedido?</h3>
<br />
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="id">id:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="id_delete" disabled>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="orden_de_compra">Orden de compra:</label>
<div class="col-sm-10">
<input type="name" class="form-control" id="orden_de_compra_delete" disabled>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-danger delete" data-dismiss="modal">
<span id="" class='glyphicon glyphicon-trash'></span> Delete
</button>this delete button doesnt work with Bootstrap 4 but is working with bootstrap 3
<button type="button" class="btn btn-warning" data-dismiss="modal">
<span class='glyphicon glyphicon-remove'></span> Close
</button>
</div>
</div>
</div>
</div>
</div>
After a look at the Migrating to v4 documention and finding an absolute nothing about this...
I finally found it by comparing the v4 markup in search of what the %&* can be different.
It's pretty subtile... I don't know what class="modal-cliente" was for... Potentially something wrong that wasn't affecting v3. But it seems it is the issue with v4. The role="document" may be important too... Sorry, I can't explain in more details. ;)
Look for the 2 slightly changed lines in the markup below.
BS4:
$('.modal-footer').on('click', '.delete', function() {
console.log("I'm here.");
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<button type="button" data-toggle="modal" data-target="#deleteModal">Open Modal</button>
<div id="deleteModal" class="modal fade" role="dialog">
<!-- Those 2 lines are slightly changed -->
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- ============================ -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-orden_de_compra"></h4>
</div>
<div class="modal-body">
<h3 class="text-center">¿Estas seguro de que quieres eliminar este pedido?</h3>
<br />
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="id">id:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="id_delete" disabled>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="orden_de_compra">Orden de compra:</label>
<div class="col-sm-10">
<input type="name" class="form-control" id="orden_de_compra_delete" disabled>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-danger delete" data-dismiss="modal">
<span id="" class='glyphicon glyphicon-trash'></span> Delete
</button>this delete button doesnt work with Bootstrap 4 but is working with bootstrap 3
<button type="button" class="btn btn-warning" data-dismiss="modal">
<span class='glyphicon glyphicon-remove'></span> Close
</button>
</div>
</div>
</div>
</div>
</div>
I want to display a number in a bootstrap modal after i use post method to submit a form .
But the bootstrap modal cannot show out the number ($_POST[number]).
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<label class="control-label" >Number</label>
<div class="controls">
<input class="form-control" name="number" type="text">
<p class="help-block">Enter a number</p>
</div>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" type="submit">submit</button>
<?php
$number = $_POST['number'];
?>
<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">
number
</h4>
</div>
<div class="modal-body">
<?php
echo $number;
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">close
</button>
<button type="button" class="btn btn-primary">
ok
</button>
</div>
</div>
</div>
</div>
How can i do it?
A few observations and flaws with your approach:
Fix HTML Errors (e.g. you are not properly closing your form, add: </form>
PHP is a server-side scripting language.
Bootstrap cannot function without Jquery which is a client-side scripting language.
You cannot trigger a Bootstrap modal on a form submission button, unless its Ajax driven!
Show the Modal after the form has been submitted (Page load) see jsfiddle example
Complete code:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<label class="control-label" >Number</label>
<div class="controls">
<input class="form-control" name="number" type="text">
<p class="help-block">Enter a number</p>
</div>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" type="submit">submit</button>
</form>
<?php if (isset($_POST["number"])) : ?>
<!-- Show the 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">
number
</h4>
</div>
<div class="modal-body">
<?php
echo htmlspecialchars($_POST["number"]);
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">close
</button>
<button type="button" class="btn btn-primary">
ok
</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
<?php else : ?>
<!-- Do other stuff here -->
<?php endif; ?>
You need to add one more button ( input submit button ). that button will send the post request to self and update the variable $number.
First of all, you didn't close your form tag and you are trying to use submit button as a button for your modal...I don't know if that is gonna work.
Close your form tag and add input field of submit type...and then add a button for modal..that will work.
Here is the working code:
<html>
<head>
<link rel="stylesheet" href="../includes/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../includes/css/bootstrap.min.css">
</head>
<body>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<label class="control-label" >Number</label>
<div class="controls">
<input class="form-control" name="number" type="text">
<p class="help-block">Enter a number</p>
</div>
<input type="submit" value="submit">
</form>
<?php
$number = $_POST['number'];
?>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" type="submit">Modal</button>
<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">
number
</h4>
</div>
<div class="modal-body">
<?php
echo $number;
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">close
</button>
<button type="button" class="btn btn-primary">
ok
</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../includes/js/bootstrap.min.js"></script>
</body>
</html>
Change <script> and <link> tag source according to your needs.
u can remove class model and fade from 'myModel' class div or can write style for display:block. I tried your code and checked in my browser and removed above classes. I hope you get the problem. You can also view your number with viewing page source.
I also noticed something about this Modal Problem, remove type="button" from your <button> and the code runs.
Would have posted this as comment but I don't have enough rep yet.
This is because the PHP code gets executed server side and is executed before the HTML is loaded, so the $number is an empty string.
I am using Twitter Bootstrap for both tabs and modals. I have two tabs that use identical code. In the first tab the modals work perfectly, but in the second tab the screen will darken but the modal does not appear.
here is my code for calling the modal (same code used in both tabs) in list.php:
<a type="button" href="edit.php?id='.$id.'" data-target="#edit_modal" data-toggle="modal">Edit</a>
here is my modal in list.php
<div class="modal hide fade" id="edit_modal" 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>Edit Testimonials</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
</div>
and here is edit.php where the true body of the modal is
<div id="edit_modal">
<div class="modal-body">
<?php echo ($name_error != "") ? $name_error : ""; ?>
<form class="form-horizontal" action="edit.php?id=<?php echo $id; ?>" method="post">
<div class="control-group">
<label class="control-label">Testimonial</label>
<div class="controls">
<textarea class="input-xlarge" name="body" cols=100 rows=5><?php echo $testimonial['body']?></textarea>
</div>
</div>
<div class="control-group">
<label class="control-label">Author</label>
<div class="controls">
<textarea class="input-xlarge" name="author" cols=100 rows=5><?php echo $testimonial['author']?></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Update Testimonial" name="submit-form" />
Close
</div>
</form>
</div>