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>