Modal Dialog Example based on Bootstrap 4 is super easy as long as you understand the concept.
<script> function updateTags() { alert("Update completed!"); } </script> <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#tagModal"> Update Tags </button> <div class="modal fade" id="tagModal" tabindex="-1" aria-labelledby="tagModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="tagModalLabel">Update Tags</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <textarea class="ignore-tinymce" id="new_tags" cols="80" rows="8" style="width:100%;">{$myPost['post_tags']}</textarea> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" onClick="javascript:updateTags();">Save changes</button> </div> </div> </div> </div>
For better understanding, you can find more information at https://getbootstrap.com/docs/4.0/components/modal/