如何在特定的窗口大小中刪除data-toggle =「modal」？

我是JavaScript的初學者。我想在屏幕尺寸小於760像素時刪除數據切換屬性，並使href工作。我不知道如何刪除數據切換屬性，下面是我的代碼：如何在特定的窗口大小中刪除data-toggle =「modal」？

<div class="portfolio logo1 mix_all" data-cat="logo" style="display: inline-block; opacity: 1;"> 
    <div class="portfolio-wrapper">      
     <a data-toggle="modal" data-target="#myModal1" href="http://www.example.com/main/includes/onepager/business_service/example/index.php" class="b-link-stripe b-animate-go thickbox"> 
      <img class="p-img" src="http://www.example.com/theme/mobile-page-files/web/images/small-portfolio/example.JPG" /> 
      <div class="b-wrapper"> 
       <h2 class="b-animate b-from-left b-delay03"> 
        <img src="http://www.example.com/theme/mobile-page-files/web/images/link-ico.png" alt=""/> 
       </h2> 
      </div> 
     </a> 
    </div> 
    <div class="port-info"> 
     <h4> 
      <a href="http://www.example.com/main/includes/onepager/business_service/example/index.php"> Example</a> 
     </h4> 
    </div> 
</div

來源

2016-04-25 screasy

沒有人討論的時候，屏幕的寬度可能會再次大於760，我們將不得不添加的情況下數據屬性返回。

window.addEventListener("resize", resizeHandler); 

function resizeHandler() { 
    var winWidth = window.innerWidth, 
     threshold = 760, 
     els  = document.getElementsByClassName('thickbox'); 

    [].forEach.call(els, function (el) { 
    if (winWidth < threshold) { 
     el.removeAttribute("data-toggle"); 
    } else { 
     el.setAttribute("data-toggle", "bar"); 
    } 
    }); 
}

看看這個小小的演示，看看它在行動。 http://codepen.io/antibland/pen/reZNNO

來源

2016-04-25 01:50:32

如果我仍然有7個更多的模態與上面相同的代碼（與不同的href），這個編碼對這7個模態是否也起作用？ – screasy

我將爲您調整演示，使其適用於多種模式。 –

@TracyTan我更新了答案代碼以及Codepen演示，以便處理多種模式。完成！ –

您可以使用一點的jQuery的...不要忘了更新選擇ELEMENTID

if($(window).width() < 760){ 
    $('#ELEMENTID').find('a').removeAttr('data-toggle'); 
}

來源

2016-04-25 01:24:03

它不適用於我，當我嘗試調整窗口大小小於760像素的時候，我的模式對話框仍然會彈出... – screasy

在您的網頁（就在</body>標記之前）的底部添加以下代碼：

if(window.innerWidth < 760){ 
    document.getElementsByTagName("a")[0].removeAttribute("data-toggle"); 
}

來源

2016-04-25 01:25:21

如何在特定的窗口大小中刪除data-toggle =「modal」？

回答

相關問題