0

Getting weird problem on mobile (Chrome and Safari). I have a modal say with id xyzModal with me. I have a link which opens this modal.On desktop link appears on hover only.

So on the mobile to overcome hover effect what I have done is display the link always and oveeride the hover method

$('#link').hover(function(ev){
ev.preventDefault();
$('#xyzModal').modal()
});

Problem with this is modal comes and disappears immediately in fraction of second.

Strange part is its working fine if I do $('#xyzModal').modal() directly on the console. Moreover to the amazement modal working fine on the long press of the link also. Has anybody come across this behaviour.Its working fine in mobile firefox though.Cannot create a fiddle as fiddle will override my current library setup. Just tell me in which direction I need to search. Getting pretty clueless over here.

Thanks for your help in advance.

Ankur Aggarwal
  • 2,993
  • 5
  • 30
  • 56

1 Answers1

0

The easiest way to do this is to use Bootstrap's good ol' query classes (show/hide elements responsively) to swap between two modals in desktop and mobile and placing two buttons under query classes too.

Something like this:

HTML:

<!--BUTTONS-->
<div class="hidden-xs" id="link1">Open Modal</div>
<div class="visible-xs" id="link2">Open Modal</div>

<!--MODALS-->
<div id="xyzModal1" class="hidden-xs">
  <!--modal codes here-->
</div>

<div id="xyzModal2" class="visible-xs">
  <!--modal codes here-->
</div>

JS:

$('#link1').hover(function(){
  // place modal xyzModal1 code here
});

$("#link2").click(function() {
  // place modal xyzModal2 code here
});
AndrewL64
  • 15,794
  • 8
  • 47
  • 79