Dynamic model with Bootstrap and jQuery15.08.23

Example:
in this example, a form button will be triggered to open the dynamic model.
The event will send the form data to the dynamic modal.

# The jQuery event triggered by a button, what will call the dynamic model 
```javascript

jQuery("#booknow").submit(function () {
      const data = jQuery(this).serializeArray();
      do_modal(data);
      return false;
    });

```

# The dynamic Model Function what will be added to your html body
```javascript
function do_modal(data) {

html = '<div id="dynamicModal" class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">';
    html += '<div class="modal-dialog" role="document">';
    html += '<div class="modal-content">';
    html += '<div class="modal-header">';
    html += '<h5 class="modal-title" id="exampleModalLabel">New message</h5>';
    html += '<button type="button" class="close" data-dismiss="modal" aria-label="Close">';
    html += '<span aria-hidden="true">×</span>';
    html += '</button>';
    html += '</div>';
    html += '<div class="modal-body">';
    html += '<ul class="list-group">';
    for(let i in data)
    {
      html +='<li class="list-group-item">' +data[i]["name"] +': ' + data[i]["value"] + '</li>';
    }
    html += '</ul>';

html += '<form>';
    html += '<div class="form-group">';
    html += '<label for="name" class="col-form-label">Your Name:</label>';
    html += '<input type="text" class="form-control" id="name" name="name">';
    html += '</div>';
    html += '<div class="form-group">';
    html += '<label for="contact_info" class="col-form-label">Your Contact Info:</label>';
    html += '<input type="text" class="form-control" id="contact_info" name="contact_info">';
    html += '</div>';
    
    html += '</form>';

html += '</div>';
    html += '<div class="modal-footer">';
    html += '<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>';
    html += '<button type="button" class="btn btn-primary">Book Now</button>';
    html += '</div>';
    html += '</div>';
    html += '</div>';
    html += '</div>';

$('body').append(html);
    $("#dynamicModal").modal();
    $("#dynamicModal").modal('show');

$('#dynamicModal').on('hidden.bs.modal', function (e) {
	$(this).remove();
    });

}

```

https://getbootstrap.com/docs/4.0/components/modal/

Anonymous

Dynamic model with Bootstrap and jQuery15.08.23

Information Epoch 1751544180