Skip to main content

Modals are a little more tricky because you can't just place them inside a component. For them to work properly, you need to place all of the code below in the "Before closing body scripts" field on the page you wish for it show up on.

<div class="modal" tabindex="-1" role="dialog" id="modalMessage" data-backdrop="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
      <div class="modal-body">
<p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script> $(function () { $('#modalMessage').modal('show'); }); </script>
#modalMessage > .modal-dialog { -webkit-transform: translate(0, calc(50vh - 50%)); -ms-transform: translate(0, 50vh) translate(0, -50%); -o-transform: translate(0, calc(50vh - 50%)); transform: translate(0, 50vh) translate(0, -50%);} </style>

What's With All These Cookie Notices?

Wondering why so many websites display these cookie notices? Find out.

Back to top