There's no need to use js here - the problem is somewhere else, but the solution is really easy. Please put your .modal-dialog into:

<div class="modal fade" id="modalDiscount">
[...]
</div>

I also added the ID to your modal so you could use the button to launch the modal

Well, your examples do not make it simple, for example this one was generated for me from your site: https://mdbootstrap.com/snippets/jquery/trisys/1208885

The modal shows BEFORE the LAUNCH MODAL button is clicked.

Can we have a sample fully coded in Javascript which: 1. Show the modal 2. Does not close when the user clicks anywhere except the modal buttons 3. Captures a button click 4. Close the modal via Javascript in this button click.

As we mentioned in our modals documentation, you can hide the modal like this: $('#YourModal').modal('hide');

Could this be more simple?