Skip to main content

Custom Confirm Modal Dialog

PMACS Frontend overrides the default browser confirm dialog with a styled modal. The modal comes with the following defaults listed below. These individual attributes can be overridden with the following data attributes:

Modal element Default data override
modal-title "Please confirm your choice" data-confirm-title
modal-body "Are you sure?" data-confirm
button "Confirm" data-confirm-button

Completely Overriding

If you would like to override the modal in its entirety and provide your own, you can set the data-confirm-dialog to the ID of your custom modal. In this case, the value for your data-confirm will be ignored and no content replacement will take place. Your overriding modal needs to have the following basic structure to work as a modal, and must include a .custom-confirm button:

<div id="confirm_dialog_override_example" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header"></div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary custom-confirm">Confirm</button>
      </div>
    </div>
  </div>
</div>