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.





You can get more creative using this Modal, if you want to add an image or change the looks of the modal and you don't know how to write the extra code, we recommend for you to contact a developer in the Marketplace.