Question

我已经使用Javascript在网站上打开了弹出窗口，但是由于我的样式，我需要能够根据屏幕尺寸（尤其是最大宽度999px，然后是1000px +）来调整弹出窗口的大小

我的JS打开弹出窗口如下：

function openPopUp1() {
      document.getElementById("Dry2Dry").style.height = "85%";
      document.getElementById("Dry2Dry").style.width = "40%";
      document.getElementById('blackout').style.opacity = '0.1';
      document.getElementById('blackout').style.overflow = 'hidden';
      $('body').addClass('stop-scrolling')
    }

此代码对于移动设备上方的任何屏幕宽度都非常适合，但是我需要将弹出窗口的宽度设置为100％，而不是移动设备屏幕的40％才能正常工作。

我尝试使用w3学校教程，但是知道还是有用。

function myFunction(x) {
    if (x.matches) { // If media query matches
        function openPopUp1() {
      document.getElementById("Dry2Dry").style.height = "85%";
      document.getElementById("Dry2Dry").style.width = "100%";
      document.getElementById('blackout').style.opacity = '0.1';
      document.getElementById('blackout').style.overflow = 'hidden';
      $('body').addClass('stop-scrolling')
    } 
    } else {
       function openPopUp1() {
      document.getElementById("Dry2Dry").style.height = "85%";
      document.getElementById("Dry2Dry").style.width = "40%";
      document.getElementById('blackout').style.opacity = '0.1';
      document.getElementById('blackout').style.overflow = 'hidden';
      $('body').addClass('stop-scrolling')
    } 
    }
}

var x = window.matchMedia("(max-width: 999px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes

如果有人可以指出我犯错的方向，或者提出一种更有效的（有效的！）方法，那将不胜感激！

如果您需要我提供任何其他资源，请告诉我。预先感谢！

Answer 1

尝试

send_mail

它应该检测到移动设备并将宽度更改为100％

打开弹出窗口时在Javascript中使用媒体查询

1 个答案: