简体   繁体   English

Bootstrap3-在移动设备上禁用弹出窗口

[英]Bootstrap3 - Disable Popover on mobile devices

I'm using the popover in hover mode when the mouse moves over the buttons of social networks. 当鼠标移到社交网络的按钮上时,我在悬停模式下使用弹出框。 This works well in the browser but would like to be disabled in mobile devices or to be more exact, on devices that do not use mouse. 这在浏览器中效果很好,但希望在移动设备上或更确切地说在不使用鼠标的设备上被禁用。

        <div class="collapse navbar-collapse navbar-ex2-collapse">
            <ul class="nav navbar-nav textomenu">
                <li><div id="example" data-trigger="hover" data-content="Comparte esta página!" data-original-title="Amixer Music" class="fb-like botonlike" data-href="http://www.traductoramixer.es/amixermusic/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div></li>
                <li><div id="example2" data-trigger="hover" data-content="Unete a nosotros!" data-original-title="Traductor Amixer" class="fb-like botonlike" data-href="https://www.facebook.com/traductoramixer.es" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div></li>
                <li><div id="example3" data-trigger="hover" data-content="Sigueme!" data-original-title="Kokox - Webmaster" class="fb-follow botoncomparte" data-href="http://www.facebook.com/elkokox" data-colorscheme="light" data-layout="button_count" data-show-faces="false"></div></li>
            </ul>
        </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

      <script>
          $(function (){
             $("#example").popover({

                placement: 'bottom'
             });

          });

          $(function (){
             $("#example2").popover();
          });

          $(function (){
             $("#example3").popover({
                placement: 'top'
             });
          });
      </script>

I have taken this decision because in the small screens, popover leaving margin and I think his use (hover mode) is unnecessary for devices that do not use mouse. 我之所以做出此决定,是因为在小屏幕上,弹出窗口会留有余量,并且我认为对于不使用鼠标的设备,不需要使用(悬停模式)。

Thanks in advance. 提前致谢。

See this answer . 看到这个答案

You can use Modernizr to detect is device a touch device and based on it activate or no activate popover 您可以使用Modernizr来检测设备是触摸设备,并基于该设备激活或不激活popover

JavaScript: JavaScript:

if (Modernizr.touch) {
   // activate popover
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM