Question

我正在使用基础5.在页脚的某个地方，我有两个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会变小。在这里，我需要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。在大屏幕上，中等音量只是很大。

有没有办法自动执行此操作？如果screenize小于大：打开所有模态作为mediumModal，如果屏幕足够大，则将它们全部打开为smallModal。如果屏幕变得非常小（智能手机）基金会自动切换到全屏模式。就像那样，但对于中等屏幕和大屏幕。

Answer 1

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

创建一个新功能

检查窗口宽度并根据结果设置变量。
- 如果它大于768，请将变量设置为“smallModal”
- 如果小于768，请将变量设置为“mediumModal”
根据应该的设置检查现有设置
- 如果不同，请将属性设置为所需的设置
- 如果相同，则不执行任何操作

使用不带括号的window.onresize = function将此函数附加到windows resize事件，以便传递函数引用而不是其余

在页面加载时运行一次该函数。

_{注意： 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();

基础：如何在中小型模式之间切换？

1 个答案: