Twitter Bootstap Issue about ouibounce HOT 8 CLOSED

Well, I had some issues with Ouibounce & Bootstrap's modal.

Indeed, with only

ouibounce(false, {
        callback: function() {
            $('#your-modal-id').modal('show');
        }
  });

The isDisabled() function will be at true and if so, the ouibounce will never be fired.
So we have to make it false, like this:

document.addEventListener('DOMContentLoaded', function(){
    var _ouibounce = ouibounce(false, {
        aggressive: true,
        timer: 0,
        callback: function() {
            jQuery('#your-modal-id').modal('show');
        }
    });
});

Found the code here #92

Hop it helps!

Anyway @carlsednaoui that's a very nice plugin you made there, great great job. 👍

from ouibounce.

Maybe, much easier is do something like this:

 ouibounce(false, {
        callback: function() {
            $('#your-modal-id').modal('show');
        }
  });

from ouibounce.

I think that bootstrap takes over the .modal class.

Did you try renaming your classes? Example:

<div id="ouibounce-modal">
      <div class="underlay"></div>
      <div class="ouibounce-modal">
        <div class="ouibounce-modal-title">
          <h3>This is a OuiBounce modal!</h3>
        </div>

        <div class="ouibounce-modal-body">
          <p>A doge is an elected chief of state lordship, the ruler of the Republic in many of the Italian city states during the medieval and renaissance periods, in the Italian "crowned republics".</p>
          <p>The word is from a Venetian word that descends from the Latin dux (as do the English duke and the standard Italian duce and duca), meaning "leader", especially in a military context. The wife of a doge is styled a dogaressa. <a href="https://en.wikipedia.org/wiki/Doge" target="blank">[1]</a></p>

          <form>
            <input type="text" placeholder="[email protected]">
            <input type="submit" value="learn more &raquo;">
            <p class="form-notice">*this is a fake form</p>
          </form>
        </div>

        <div class="ouibounce-modal-footer">
          <p>no thanks</p>
        </div>
      </div>
    </div>

from ouibounce.

Thank you Carl! It works!

from ouibounce.

@scofield-ua solution is nice and easy.
Knowing Twitter Bootstrap is very popular, maybe it should be in the documentation ?

from ouibounce.

@muhammedtufekyapan @carlsednaoui the main reason you can't see your element, is for .fade class ( next .modal). That class apply opacity: 0 to you element.

@scofield-ua your solution doesn't work for me. Seems like doesn't reconize $(...) as an element

p.s. sorry for my awful english

from ouibounce.

Amazing, thanks for this @DaPo .
However, the example gives ways for the user to exit by clicking an exit buttom. How do you incorporate this into the above script?

        document.addEventListener('DOMContentLoaded', function(){       
            var _ouibounce = ouibounce(false, {
                aggressive: true,
                timer: 0,
                callback: function() {
                    jQuery('#your-modal-id').modal('show');
                }
            });
        
        $('body').on('click', function() {
          $('#ouibounce-modal').hide();
        });

        $('#ouibounce-modal .modal-footer').on('click', function() {
           $('#ouibounce-modal').hide();
        });
            
        $('#ouibounce-modal .modal').on('click', function(e) {
            e.stopPropagation();
        });

from ouibounce.

@EssiemLtd hello, I'm so so sorry, it's quite a while now, I barely remember what ouibounce does and I don't have much time to try to sort something out for you.

But you maybe need to use modal's event first and search for "javascript detect click outside element" or something like this.

Have fun!

from ouibounce.