JS matchMedia if 语句

Question

我正在尝试为 >=768px 的视口触发我的 fancybox，并为 <768px 的视口触发我的滑动框。不幸的是现在都没有打开...我错过了什么？谢谢你的帮助！我有很多 CSS 因此我只是添加了 JS（我很确定这是一个语法错误...）。

// JavaScript Document

$(document).ready(function() {
if (window.matchMedia("(min-width: 768px)").matches) {
  
 $(".fancybox").fancybox({
  //width: '70%',
  //height: '70%',
      helpers: {
        overlay: {
          locked: false
        }
      },
    'beforeLoad': function(){
      disable_scroll();
        },
     'afterClose': function(){
       enable_scroll();
      }
  
 });
 
});
var keys = [37, 38, 39, 40];

    function preventDefault(e) {
      e = e || window.event;
      if (e.preventDefault) e.preventDefault();
      e.returnValue = false;  
    }

    function keydown(e) {
        for (var i = keys.length; i--;) {
            if (e.keyCode === keys[i]) {
                preventDefault(e);
                return;
            }
        }
    }

    function wheel(e) {
      preventDefault(e);
    }

    function disable_scroll() {
      if (window.addEventListener) {
          window.addEventListener('DOMMouseScroll', wheel, false);
      }
      window.onmousewheel = document.onmousewheel = wheel;
      document.onkeydown = keydown;
    }

    function enable_scroll() {
        if (window.removeEventListener) {
            window.removeEventListener('DOMMouseScroll', wheel, false);
        }
        window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
    }
} else {
  ;( function( $ ) {

 $( '.swipebox' ).swipebox();

} )( jQuery );
}

Answer 1

试试这个。我也会更新fiddle。

Fiddle here.

$(document).ready(function() {
if (window.matchMedia("(min-width: 768px)").matches) {

  $(".fancybox").fancybox({
    //width: '70%',
    //height: '70%',
      helpers: {
        overlay: {
          locked: false
        }
      },
    'beforeLoad': function(){
      disable_scroll();
        },
     'afterClose': function(){
       enable_scroll();
      }

  });


var keys = [37, 38, 39, 40];

    function preventDefault(e) {
      e = e || window.event;
      if (e.preventDefault) e.preventDefault();
      e.returnValue = false;  
    }

    function keydown(e) {
        for (var i = keys.length; i--;) {
            if (e.keyCode === keys[i]) {
                preventDefault(e);
                return;
            }
        }
    }

    function wheel(e) {
      preventDefault(e);
    }

    function disable_scroll() {
      if (window.addEventListener) {
          window.addEventListener('DOMMouseScroll', wheel, false);
      }
      window.onmousewheel = document.onmousewheel = wheel;
      document.onkeydown = keydown;
    }

    function enable_scroll() {
        if (window.removeEventListener) {
            window.removeEventListener('DOMMouseScroll', wheel, false);
        }
        window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
    }
} else {
  ( function( $ ) {

    $( '.swipebox' ).swipebox();

  } )( jQuery );
}
});

JS matchMedia if 语句

JS matchMedia if-statement

javascript

jquery

fancybox-2

matchmedia