Laravel 9 + Vue 3实现弹窗窗口自定义iPhone样机边框方案咨询

原生window.open创建的浏览器窗口无法直接添加自定义外层框架，建议改用Vue自定义弹窗组件，完全控制弹窗样式，将iPhone样机作为容器，内部嵌入外部站点的iframe。以下是具体实现：

1. 修改模板部分 #

保留原按钮，新增弹窗组件的HTML结构：

<template>
  <div>
    <!-- 原触发按钮 -->
    <button class="floating-btn" @click="openPopupTab">
      <img src="/images/fab.png" class="fotoSticky">
    </button>

    <!-- 自定义iPhone样机弹窗 -->
    <div v-if="showPopup" class="iphone-popup-overlay" @click.self="closePopupTab">
      <div class="iphone-container">
        <!-- iPhone样机框架容器 -->
        <div class="iphone-frame">
          <!-- 嵌入外部站点的iframe -->
          <iframe 
            :src="url" 
            class="iphone-screen"
            frameborder="0"
            allowfullscreen
          ></iframe>
        </div>
        <!-- 弹窗关闭按钮 -->
        <button class="popup-close-btn" @click="closePopupTab">×</button>
      </div>
    </div>
  </div>
</template>

2. 调整脚本逻辑 #

修改弹窗触发方式，新增关闭方法，保留原有业务逻辑：

<script>
import axios from 'axios';
export default {
  data() {
    return {
      form: {
        title: '',
        body: '',
      },
      showPopup: false,
      url: 'https://jai-indonesia.com/',
      list_lowongan: []
    };
  },

  mounted() {
    console.log('on mounted');
    axios.get('post/list').then((response) => {
      console.log(response.data)
      this.list_lowongan = response.data
    }).catch((error) => {
      console.log(error)
    });
  },

  methods: {
    openPopupTab() {
      this.showPopup = true;
    },
    closePopupTab() {
      this.showPopup = false;
    }
  }
};
</script>

3. 添加样式控制 #

核心是将iPhone样机设为容器背景，调整iframe位置尺寸匹配样机屏幕区域（需根据你使用的样机图片实际尺寸修改数值）：

<style scoped>
/* 弹窗遮罩层 */
.iphone-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* iPhone容器 */
.iphone-container {
  position: relative;
}

/* iPhone样机框架 */
.iphone-frame {
  width: 320px; /* 替换为你的样机图片宽度 */
  height: 640px; /* 替换为你的样机图片高度 */
  background-image: url('/images/iphone-mockup.png'); /* 替换为你的样机图片路径 */
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 内部iframe（模拟手机屏幕） */
.iphone-screen {
  width: 280px; /* 匹配样机屏幕的实际宽度 */
  height: 500px; /* 匹配样机屏幕的实际高度 */
  border-radius: 30px; /* 可选：模拟手机屏幕圆角 */
}

/* 关闭按钮 */
.popup-close-btn {
  position: absolute;
  top: -40px;
  right: 0;
  width: 40px;
  height: 40px;
  border: none;
  background-color: #fff;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
}
</style>

关键说明 #

• 替换/images/iphone-mockup.png为你的iPhone样机图片实际路径，确保图片尺寸与样式中的宽高匹配。
• 根据样机图片的屏幕区域精准调整.iphone-screen的宽高，让iframe刚好嵌入到样机的屏幕部分。
• 遮罩层点击空白处可关闭弹窗，也可根据需求修改关闭触发逻辑。
• 该方案比原生弹窗更灵活，完全可控样式，还能避免浏览器弹窗拦截问题。

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