Skip to navigation
Dynamic model with Bootstrap and jQuery
15.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 = '
'; html += '
'; html += '
'; html += '
'; html += '
New message
'; html += '
'; html += '
×
'; html += '
'; html += '
'; html += '
'; html += '
'; for(let i in data) { html +='
' +data[i]["name"] +': ' + data[i]["value"] + '
'; } html += '
'; html += '
'; html += '
'; html += '
Your Name:
'; html += '
'; html += '
'; html += '
'; html += '
Your Contact Info:
'; html += '
'; html += '
'; html += '
'; html += '
'; html += ''; html += '
'; html += '
'; html += '
'; $('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/
Reply
Anonymous
Information Epoch 1742188759
You can always add complexity.
Home
Notebook
Contact us