javascript - 基础:如何在中小型显示模式之间切换？

我正在使用Foundation5。在页脚的某个地方，我有两个div等着打开以作为显示模式：

<div id="smallModal"  class="reveal-modal small"  data-reveal aria-hidden="true" role="dialog"></div>
<div id="mediumModal" class="reveal-modal medium" data-reveal aria-hidden="true" role="dialog"></div>

我使用它们在Ajax中加载内容。很好
现在在大屏幕上，打开一个smallModal就足够了。如果屏幕尺寸变小（平板电脑），则smallModal变小。在这里，我需要mediumModal。

我使用以下代码打开smallModal：

<a href="somefile.php" data-reveal-id="smallModal" data-reveal-ajax="true">Open Modal</a>

我不想使用show-for-medium-only或show-for-large-up CSS类。因为在这种情况下，我必须写两个链接：

<a calss="show-for-medium-only" href="somefile.php" data-reveal-id="mediumModal" data-reveal-ajax="true">Open Modal</a>
<a calss="show-for-large-up"    href="somefile.php" data-reveal-id="smallModal"  data-reveal-ajax="true">Open Modal</a>

而且我也不想为所有屏幕尺寸都打开mediumModals。 mediumModals在大屏幕上非常大。

有没有办法让它自动执行？如果screensize小于大尺寸：将所有模态作为mediumModal打开，如果screen足够大，则将它们全部作为smallModal打开。
如果屏幕很小（智能手机），Foundation会自行切换到全屏模式。就像这样，但适用于中型屏幕和大屏幕。

最佳答案

将两个链接合并为一个，并在其余链接中添加id属性，以便您可以使用javascript选择它。

创建一个新功能


检查窗口宽度并根据结果设置变量。


如果大于768，则将变量设置为“ smallModal”
如果小于768，则将变量设置为“ mediumModal”

将现有设置与应该设置的设置进行检查


如果不同，则将属性设置为所需的设置
如果相同，则什么也不做



使用window.onresize = function将此函数附加到Windows调整大小事件，不带方括号，以便您传递函数引用，而不传递其余部分

页面加载一次运行该功能。

注意：768是任意数字，您可以使用任何喜欢的数字。

var toggle = document.getElementById('toggle-modal');

function changeToggle() {
    var reveal = window.innerWidth > 768 ? 'smallModal' : 'mediumModal'
    if(toggle.getAttribute('data-reveal-id')!=== reveal) {
        toggle.setAttribute('data-reveal-id',reveal);
    }
}

window.onresize = changeToggle;

changeToggle();

关于javascript - 基础:如何在中小型显示模式之间切换？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31016021/