jquery - 如果宽度小于767px，则删除html

Question

目前，我有一个模式弹出窗口（Shadowbox），用于我们网站的“反馈”表单。我对桌面浏览器上的模态很好，但我想在移动浏览器上打开一个新的“页面”（小于767px），并在移动设备上消除模态复杂性。

是否有一个jquery解决方案从链接代码中删除'rel =“shadowbox”'元素，以便它只是打开一个新的浏览器窗口？

示例：

桌面版

<a href="site.com" target="_blank" rel="shadowbox">Link</a>

767px或更低版本

<a href="site.com" target="_blank">Link</a>

到目前为止，我有这个脚本：

<script>
$( "a" )
  .contents()
  .filter(function(){
    return this.nodeType !== 1;
  })
  .remove( "rel="shadowbox"" );
</script>

我无法弄清楚如何首先检测宽度以应用“if，then”。

非常感谢帮助！不可否认，我并不像我需要的那样使用JS。

Answer 1

http://jsfiddle.net/HcxwE/

if($(window).width() < 768){
    console.log('kill shadowbox');
    $("a[rel='shadowbox']" ).removeAttr('rel');
}

您可能会遇到在删除shadowbox rel之前将侦听器附加到元素的问题。

看到这个小提琴

http://jsfiddle.net/qV882/

Answer 2

您可以使用jquery .css（）函数获取任何css属性

if ( $(this).css('width') <= '767' ){

    // Do things here
}

然后你可以给你的链接一个id并使用.removeAttr（）

// Do things here
$('#my_a').removeAttr('rel');

Answer 3

if (document.width < 767) {
   $.remove( "rel="shadowbox" );
}