Modal

A modal blocks all user interaction with an overlay and customised message.

The content for a modal should be contained at the bottom of the page inside a script template, before the closing body tag.

Basic Modal

Ensure inputs and buttons are inside a form. If you need to pass an id to the back-end you can store this in the hidden input inside the modal.

<script type="text/template" id="confirm-delete-user">

 <header>
 <h1>Delete User</h1>
 </header>

 <form class="frm-delete-user">

   <input type="hidden" class="id hide" value="" />

   <p>Are you sure you want to delete <span class="custom"></span>?</p> 

   <section class="buttons">
     <input type="submit" value="Delete" class="btn btn-confirm-delete-user btn-close-modal" autofocus />
     <button class="btn btn-outline btn-cancel">Cancel</button>
   </section>

 </form>

</script>
// modalName: string containing the id of the script template
// custom: string containing customised text to be used in the copy
// id: a data-id for storing a reference to be submitted with the form

showModal(modalName, custom, id)

Modal Confirmation Handler

When handling forms submitted inside a modal, use:

$(document).on("submit", ".form-name", function(e){ e.preventDefault() }