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

时间:2013-08-13 00:16:36

标签: jquery width detect

目前,我有一个模式弹出窗口(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。

3 个答案:

答案 0 :(得分:1)

http://jsfiddle.net/HcxwE/

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

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

看到这个小提琴

http://jsfiddle.net/qV882/

答案 1 :(得分:0)

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

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

    // Do things here
}

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

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

答案 2 :(得分:0)

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