form in modal popup code example
Example 1: bootstrap modal popup
<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>
</div>
</div>
</div>
</div>
Example 2: populate modal from table
<script>
$(function(){
$('#infoModal').modal({
keyboard: true,
backdrop: "static",
show:false,
}).on('show.bs.modal', function(){
var getIdFromRow = $(event.target).closest('tr').data('id');
var name = $(event.target).closest('tr').find('td:eq( 0 )').html();
var pos = $(event.target).closest('tr').find('td:eq( 1 )').html();
$(this).find('#orderDetails').html($('<b> Order Id selected: ' + getIdFromRow + '</b>'));
$(this).find('#name').text(name);
$(this).find('#pos').text(pos);
});
});
</script>