[Vuejs]-Laravel 9 Vue js 3 Changing a popup window's frame

by

0👍

Create a new HTML file that contains the iPhone mockup image and the content that you want to display in the popup window. You can use an image editing tool or a design tool to create the mockup image.

Save the HTML file in your project directory and give it a name like popup.html.

In your Vue.js component, modify the openPopupTab method to open the popup.html file in a new window using the window.open method. You can set the width and height of the window to match the size of the iPhone mockup image.

openPopupTab() {
  const width = 375; // width of the iPhone mockup image
  const height = 812; // height of the iPhone mockup image
  const left = window.screenLeft + (window.innerWidth - width) / 2; // center the window horizontally
  const top = window.screenTop + (window.innerHeight - height) / 2; // center the window vertically
  window.open('popup.html', '_blank', `width=${width},height=${height},left=${left},top=${top}`);
}

Leave a comment