<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="modal fade" id="deleteProductModal" tabindex="-1" role="dialog" aria-labelledby="deleteProductModalLabel" aria-hidden="true"> <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" id="deleteProductModalLabel">Confirm Delete</h4> </div> <div class="modal-body"> <label for="message-text" class="form-control-label">Work Order:</label> <textarea class="form-control" id="message-text"></textarea> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger">Yes</button> <button type="button" class="btn btn-default" data-dismiss="modal">No</button> </div> </div> </div> </div> <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#deleteProductModal" data-productid="3" data-productname="Product 3">Delete</button>

$(document).ready(function () { $('#deleteProductModal').on('show.bs.modal', function (event) { // id of the modal with event var button = $(event.relatedTarget) // Button that triggered the modal var productid = button.data('productid') // Extract info from data-* attributes var productname = button.data('productname') var title = 'Confirm Delete #' + productid var content = 'Are you sure want to delete ' + productname + '?' var content1 = '<label for="message-text" class="form-control-label">Work Order:</label><textarea class="form-control" id="message-text"></textarea>'; // Update the modal's content. var modal = $(this) modal.find('.modal-title').text(title) modal.find('.modal-body').html(content1) // And if you wish to pass the productid to modal's 'Yes' button for further processing modal.find('button.btn-danger').val(productid) }) })