How To Create A Modal - Pop Up Box

Link: https://support.brilliantdirectories.com/support/solutions/articles/12000052780-how-to-create-a-modal-pop-up-box

Our Webinars on Wednesdays always have great tips & tools for you to use on your website, this article covers a topic covered on the following Webinar: Create Pop-Up Notifications & Offer Boxes on Your Website - Training Workshop for Directory Software


NOTE: This is a basic Pop Up Modal template that you can use to display content. Keep in mind that some forms, i.e signup forms may need further customization to work on a modal.


Here are the steps in order for you to create and display a Modal Pop Up.


1. Create a widget.


Toolbox >> Widget Manager >> New Widget +


Add the following code on the HTML Text Box:


<div class="modal fade" id="Modaltimed" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Thank you for visiting us!</h4>
      </div>
      <div class="modal-body">
        Happy Holidays!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>





These are the 2 main components:


  • Title
  • Body Text




Now on the JavaScript Text Box you must paste this code:


<script>
setTimeout(function() {
    $('#Modaltimed').modal();
}, 2000);
</script>






2. You will need to call this widget on the page you are looking to have it shown.


Please see: How To Call A Widget On A Custom Page


For this example we are going to place the Modal in the /join page.