基于data-attribute切换div类及iframe横竖屏内容CSS样式

Got it, let's walk through how to make this work smoothly. The goal is to trigger a popup with an iframe, and automatically apply the right CSS (landscape or portrait) plus update the popup div's class based on a data attribute on your trigger link. Here's a complete, vanilla JS approach that's easy to adapt:

1. First, Set Up Your HTML Structure #

We'll need:

• Trigger links with a data-orientation attribute (either landscape or portrait)
• A hidden popup container div that holds the iframe
• Pre-loaded CSS files for both orientations (we'll toggle which one is active)

<!-- Trigger Links -->
<a href="game-landscape.html" class="game-trigger" data-orientation="landscape">Open Landscape Game</a>
<a href="game-portrait.html" class="game-trigger" data-orientation="portrait">Open Portrait Game</a>

<!-- Popup Container -->
<div id="game-popup" class="game-popup">
  <iframe id="game-iframe" src="" frameborder="0"></iframe>
  <button id="close-popup">Close</button>
</div>

<!-- Pre-load Both CSS Files (one will be disabled by default) -->
<link rel="stylesheet" href="landscape.css" id="landscape-css">
<link rel="stylesheet" href="portrait.css" id="portrait-css" disabled>

2. Define Your CSS Styles #

Make sure your two CSS files target the popup and iframe correctly. For example:

landscape.css

.game-popup {
  width: 800px;
  height: 450px;
  /* Add your landscape popup styling here */
}
#game-iframe {
  width: 100%;
  height: 100%;
}

portrait.css

.game-popup {
  width: 375px;
  height: 667px;
  /* Add your portrait popup styling here */
}
#game-iframe {
  width: 100%;
  height: 100%;
}

Also add base styling for the hidden popup:

.game-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  background: white;
  padding: 20px;
  z-index: 1000;
}

3. Add the JavaScript Logic #

This code will handle clicks on the trigger links, toggle the correct CSS, update the popup's class, and load the game into the iframe.

// Get elements we need
const triggers = document.querySelectorAll('.game-trigger');
const popup = document.getElementById('game-popup');
const iframe = document.getElementById('game-iframe');
const closeBtn = document.getElementById('close-popup');
const landscapeCss = document.getElementById('landscape-css');
const portraitCss = document.getElementById('portrait-css');

// Handle trigger link clicks
triggers.forEach(trigger => {
  trigger.addEventListener('click', (e) => {
    e.preventDefault(); // Stop the default link behavior
    
    // Get the orientation from the data attribute
    const orientation = trigger.dataset.orientation;
    
    // 1. Update the popup div's class
    popup.className = `game-popup ${orientation}`;
    
    // 2. Toggle which CSS file is active
    if (orientation === 'landscape') {
      landscapeCss.disabled = false;
      portraitCss.disabled = true;
    } else {
      landscapeCss.disabled = true;
      portraitCss.disabled = false;
    }
    
    // 3. Load the game into the iframe
    iframe.src = trigger.href;
    
    // 4. Show the popup
    popup.style.display = 'block';
  });
});

// Handle closing the popup
closeBtn.addEventListener('click', () => {
  popup.style.display = 'none';
  iframe.src = ''; // Clear the iframe to stop the game
});

Key Details to Note #

• CSS Toggling: By pre-loading both CSS files and using the disabled attribute, we avoid dynamic file loading delays. This is faster and more reliable for instant style switching.
• Class Update: Adding the orientation class to the popup lets you target additional elements inside the popup (like close buttons) with orientation-specific styles if needed.
• Vanilla JS: No frameworks required—this works in all modern browsers without extra dependencies.

If you need to dynamically load CSS files instead of pre-loading them (for example, if you have many orientation variants), you could modify the JS to create/remove <link> elements instead of toggling disabled, but pre-loading is better for performance here since you only have two variants.

内容的提问来源于stack exchange，提问作者user4805058