Wie kann man ein Modal nur auf Handys und Tablets auslösen?

Question

$(function() { 
 
    $('.pop').on('click', function() { 
 
    $('.imagepreview').attr('src', $(this).find('img').attr('src')); 
 
    $('#imagemodal').modal('show'); 
 
    }); 
 
});

.modal-backdrop.in { 
 
    opacity: 0.8; 
 
} 
 
#imagemodal .modal-dialog { 
 
    width: 70%; 
 
    position: center; 
 
} 
 
@media (max-width: 987px) { 
 
    .pop:hover { 
 
    opacity: 100; 
 
    filter: alpha(opacity=100); 
 
    /* For IE8 and earlier */ 
 
    } 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="row"> 
 
    <div class="col-md-4"> 
 
    <a href="#" class="pop"> 
 
     <img src="images/powwow/powwow_01.jpg" style="width: 100%"> 
 
    </a> 
 
    </div> 
 
</div> 
 

 
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-body"> 
 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span> 
 
     </button> 
 
     <img src="" class="imagepreview" style="width: 100%;"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Ich habe ein Modell, das ich für Telefone und Tablets deaktivieren möchten, wollen aber für größere Bildschirme halten. Ich habe visibility:hidden und display:none in CSS-Medienabfragen versucht, aber seltsame Ergebnisse erhalten. Ich denke, ich muss die onClick-Funktion deaktivieren, kann aber nicht herausfinden, wie das für nur kleinere Bildschirme zu tun ist.

Answer 1

Da Sie JavaScript verwenden, um das Modell anzuzeigen, überprüfen Sie einfach, ob das Gerät Ihren Kriterien entspricht, bevor Sie es tatsächlich zeigen. Ich habe eine benutzerdefinierte Funktion basierend auf einem anderen SO-Post geschrieben, um zu überprüfen, ob das Gerät mobil ist. Dann könnten Sie auch prüfen, ob die Bildschirmbreite zulässig ist.

Ersetzen Sie Javascript mit diesem:

$(function() { 
    $('.pop').on('click', function() { 
     $('.imagepreview').attr('src', $(this).find('img').attr('src')); 
     if($(window).width()<800 || isMobile()){ 
     //do substitute operation for mobile screens 
     } else { 
     $('#imagemodal').modal('show'); 
     } 
    }); 
}); 
function isMobile() { 
    var isMobile = false; //initiate as false 
    // device detection 
    if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm(os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s)|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp(i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(|\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(|\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg(g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v)|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v)|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-|)|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0, 4))) isMobile = true; 
    return isMobile; 
} 

FULL ARBEITSCode:

Der Modal wird nicht angezeigt, wenn es sich um ein mobiles Gerät ist oder wenn Bildschirmgröße als 800pixels weniger ist. Ändern Sie Ihre Einstellungen nach Bedarf. Klicken Sie auf run code snippet, um es in Aktion zu sehen!

$(function() { 
 
    $('.pop').on('click', function() { 
 
    $('.imagepreview').attr('src', $(this).find('img').attr('src')); 
 
    if ($(window).width() < 800 || isMobile()) { 
 
     //do substitute operation for mobile screens and delete below 3 lines 
 
     console.log("model not showed!!"); 
 
     console.log("isMObile : " + isMobile()); 
 
     console.log("screen size :" + $(window).width() + "px min is 800px"); 
 
    } else { 
 
     $('#imagemodal').modal('show'); 
 
    } 
 
    }); 
 
}); 
 

 
function isMobile() { 
 
    var isMobile = false; //initiate as false 
 
    // device detection 
 
    if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm(os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s)|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp(i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(|\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(|\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg(g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v)|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v)|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-|)|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0, 4))) isMobile = true; 
 
    return isMobile; 
 
}

.modal-backdrop.in { 
 
    opacity: 0.8; 
 
} 
 
#imagemodal .modal-dialog { 
 
    width: 70%; 
 
    position: center; 
 
} 
 
@media (max-width: 987px) { 
 
    .pop:hover { 
 
    opacity: 100; 
 
    filter: alpha(opacity=100); 
 
    /* For IE8 and earlier */ 
 
    } 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-md-4"> 
 
    <a href="#" class="pop"> 
 
     <img src="images/powwow/powwow_01.jpg" style="width: 100%">click 
 
    </a> 
 
    </div> 
 
</div> 
 

 
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-body"> 
 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span> 
 
     </button> 
 
     <img src="" class="imagepreview" style="width: 100%;"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Dank L.Dia auch für Bildschirmgröße Prüfung zu erwähnen. Ich habe den Scheck hinzugefügt.

Answer 2

Mit Iceman Antwort Sie können auch den Klick von Ihrem Button unbind abhängig von der Breite oder wenn es sich um eine Tablette/Mobile:

if(isMobile() || (screen.width <= 800)) { 
      $(#yourbutton).unbind('click'); 
     } 

Verwenden css die appearence der Schaltfläche zu ändern, abhängig von der Breite, Benutzer werden nicht versucht zu klicken.

Answer 3

Ich nehme an, dass Sie Bootstrap verwenden. Wenn ja, können Sie native Klassen des Bootstrap wie hidden-xs usw. verwenden. Oder Sie können nur Sichtbarkeit Klassen wie visible-lg; Da Bootstrap ein mobiles erstes Framework ist, wird Ihr Modal nicht auf anderen Geräten mit großem Bildschirm angezeigt. Für Ihr Szenario funktioniert das gut.

<div class="modal fade visible-lg" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    ... 
</div> 

Wenn Sie noch auf eine JavaScript-Lösung beharren werden, nach wie vor davon aus, dass Sie Bootstrap verwenden, so dass Sie mit jQuery, das wird die Fensterbreite erhalten und ermöglicht es Ihnen, Sie das Ereignis zu steuern.

$(document).ready(function() { 
      var $window = $(window); 

      function checkWidth() { 
       var windowsize = $window.width(); 
       if (windowsize < 1200) { 
        $(".pop").click(function (event) { 
         event.preventDefault(); 
        }); 
       } 

       else { 
        $(function() { 
         $('.pop').on('click', function() { 
          $('.imagepreview').attr('src', $(this).find('img').attr('src')); 
          $('#imagemodal').modal('show'); 
         }); 
        }); 
       } 
      } 

      checkWidth(); 
      $(window).resize(checkWidth); 
     });