Modals | Digital Design Manual

The modals component is a way of displaying more information behind a button.

This component is not recommended to be used

Research shows that this component makes it difficult to access content initially as the information is not presented easily. If you are using this component please ensure the label is informative of what information is in the modal that the user can not see yet. If you are wanting to use a modal on any services, you will need to speak to Digital first.

You must never use form controls within a modal window.

Example

                                
                                <a data-toggle="modal" href="#modal-1" data-target="#alert-modal-1" class="alert__link" aria-label="Read more about this alert" >See more </a>
                    <div class="modal fade" id="alert-modal-1" tabindex="-1" role="dialog" aria-labelledby="Modal title here">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header"> 
                                    <h4 class="modal-title">Alert  <button type="button" class="modal--close pull-right" data-dismiss="modal" aria-label="Close modal">x</button></h4>
                                </div>
                                <div class="modal-body">
                                    <div class="alert__message alert--state-danger">
                                        <p>The full body of the model should be in here, it could be a notice message like this style.</p>
<p>The content of the modal can be here. This can be anything to tables, form inputs, text etc.</p>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="modal--close" data-dismiss="modal" aria-label="Close modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>

Output
HTML