在平板电脑和移动设备中隐藏灯箱

Question

您好，我正在使用羽毛灯箱，需要它不要出现在平板电脑或移动设备上。我尝试使用来自Disable Lightbox in responsive design 的代码，但无法让它工作。代码如下：

$.noConflict();
jQuery( document ).ready(function( $ ) {
  
var lightbox = '<a href="http://info.ccfa.org/teamchallengetmm?&primary_source_code__c=internet&source_code_detail_1__c=ccteamchallenge.org&source_code_other__c=nottoolate_lightbox&which_event_are_you_interested_in__c=unknown&utm_source=tc_website&utm_medium=sitelink&utm_campaign=summer17&utm_content=nottoolate_lightbox&i_am_interested_in_=undecided"><img src="../images/content/pagebuilder/Summer17-Not-Too-Late-Lightbox-TC-Website.png "></a>';


function startLightbox(){
  $.featherlight(lightbox);
}

console.log(getCookie("tc_lightbox"));
if(getCookie("tc_lightbox")){
}
else{
  setCookie("tc_lightbox", 1);
  setTimeout(startLightbox, 1500);
}


function getCookie(name) {
  var value = "; " + document.cookie;
  var parts = value.split("; " + name + "=");
  if (parts.length == 2) return parts.pop().split(";").shift();
}

function setCookie(cname, cvalue) {
    var d = new Date();
    d.setTime(d.getTime() + (24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}



});

.featherlight-content h1,h3{
  margin:0;
}
.featherlight-content h1{
  font-size:25px;
  font-weight:bold;
}
.featherlight-content form input[type="text"], .featherlight-content form input[type="email"]{
    width:100%;
    height: 34px;
    border: 1px #757576 solid;
    border-radius: 3px;
    font-size: 16px;
    font-family: 'avenirroman';
    color: #999;
    background-color: #fff;
}
.featherlight-content form input[type="submit"]{
    width:100%;
    cursor:pointer;
    background: #f37736;
    padding: 10px 25px;
    color: #fff;
    font-family: 'avenirblack', Arial Black;
    font-size: 20px;
    text-decoration: none;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: none;
}

.featherlight .featherlight-content {
    background: transparent !important;
}

@media only screen and (max-width: 767px) {
.featherlight img {
    max-width: 100%;
}
}

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

我也试过

if ($(window).width() < 960) {
        $(lightbox).hide();
    }

并在使用 css 的媒体查询中使用 display: none

有什么想法吗？

Answer 1

这个问题

if ($(window).width() < 960) {
    $(lightbox).hide();
}

只是 lightbox 变量引用的是文本字符串而不是元素。检查他们页面上列出的羽毛灯演示，你可以尝试这样的事情

$('a[data-featherlight]').hide();

如果这不起作用，您也可以尝试在灯箱字符串中添加一个类

var lightbox = '<a class="hidethis" href="http://info.ccfa.org/teamchallengetmm?&primary_source_code__c=internet&source_code_detail_1__c=ccteamchallenge.org&source_code_other__c=nottoolate_lightbox&which_event_are_you_interested_in__c=unknown&utm_source=tc_website&utm_medium=sitelink&utm_campaign=summer17&utm_content=nottoolate_lightbox&i_am_interested_in_=undecided"><img src="../images/content/pagebuilder/Summer17-Not-Too-Late-Lightbox-TC-Website.png "></a>';

然后使用这一行

$('.hidethis').hide();

Answer 2

解决方案不是在小屏幕上隐藏它，而是永远不要加载它 除非它满足您的要求。您可以使用 Modernizr 或其他一些检查 screenSize 来测试触摸。如果测试没有通过……那么你就不要加载插件。

if ( shouldWeShowLightbox ) {
  lightbox.init();
else {
  // don't do anything.. or possibly inject link HREFS or something different to deal with your situation
}

您还可以定期检查屏幕大小并在屏幕变大时加载插件或其他内容。大多数优质插件都有一个 .destroy() 方法来杀死它，如果由于某种原因您离开该“视图”或不满足要求。

Answer 3

如果您想在手机或平板电脑上禁用羽毛灯，请将此 jQuery 脚本添加到某处，它非常适合我的情况！

<script>
jQuery(document).ready(function(){
   if (jQuery(window).width() < 960) {
       jQuery("a[data-featherlight]").attr('href', '').css({'cursor': 'pointer', 'pointer-events' : 'none'});
   }
});
</script>

其中 960 是您要禁用灯箱效果的响应断点（960 像素）。

我们正在强制禁用所有具有 data-featherlight 属性的链接