Bootstrap Snippet Popup box using HTML jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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>
  
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(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)
    })
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Popup box"
Bootstrap 3.0.0 Snippet by CharlesStone

Related: See More

Questions / Comments:

"Popup box" Bootstrap 3.0.0 Snippet by CharlesStone

Related: See More

Questions / Comments:

"Popup box"
Bootstrap 3.0.0 Snippet by CharlesStone