Twitter Bootstap Issue

[muhammedtufekyapan]

Hi,

We prepare a page and use ouibounce. We make every detail just same as examples. Modal open but we can't see. (We test it, when we inactive twitter bootstrap it work but when we use twitter bootstrap it won't work)

How can we fix that?

[carlsednaoui]

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>

[muhammedtufekyapan]

Thank you Carl! It works!

[scofield-ua]

Maybe, much easier is do something like this:

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

[bonswouar]

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

[ibbatta]

@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

[CyrilKrylatov]

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. 👍

[EssiemLtd]

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();
        });

[CyrilKrylatov]

@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!