Modal doesnt load when exit-intent

[YvoStaal]

See - http://production.siteoplossing.nl/

1) I have added the unminified ouibounce.js to the page <script src="http://production.siteoplossing.nl/userfiles/modules/microbounce/ouibounce.js"></script> 2) I have added a modale based on the bootstrap CSS

  <div class="modal fade" id="OuiBounce" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
        <h4> Header </h4>
        </div>
        <div class="modal-body">
            <p> Body </p>
        </div>
        <div class="modal-footer">
            <p> Footer </p>
        </div>
      </div>
    </div>
  </div>

And now i'm stuck on what to do. How can I make the modale popup with the exit-intent?

I guess I haven´t executed "Step 2 - Select the modal with vanilla JavaScript (or jQuery) and call ouibounce" because I don't even know what it actually means :))

-- Solved -- Had to add the following script

<script>
        // Fires modal when user exits
        var _ouibounce = ouibounce(false, {
            aggressive: true,
            timer: 0,
            callback: function() {
                $('#OuiBounce').modal('show');
            }
        });

        // Centers modal on fire and resize
        $(function() {
            function reposition() {
                var modal = $(this),
                dialog = modal.find('.modal-dialog');
                modal.css('display', 'block');

                // Dividing by two centers the modal exactly, but dividing by three 
                // or four works better for larger screens.
                dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
            }
            // Reposition when a modal is shown
            $('.modal').on('show.bs.modal', reposition);
            // Reposition when the window is resized
            $(window).on('resize', function() {
                $('.modal:visible').each(reposition);
            });
        });

        function showFormModal() {
            $("#OuiBounce").removeClass("fade").modal("hide");
            $("#exitForm").addClass("fade").modal("show");
        }

        $("#showForm").on("click", function() {
            showFormModal();
        });
</script>

[Marcom75]

hi,

where, in what file, did you put this script? thanks

[carlsednaoui]

Hi @Staalkoper, I just looked at http://production.siteoplossing.nl/ and saw a modal fire. Assuming you're all good here!