CODEWITHSUNDEEP
laravelvue.jspopuppopupwindow
clintondave10
clintondave10

Reputation: 9

Laravel 9 Vue js 3 Changing a popup window's frame

I have a button that when it's clicked, it will open a new popup window to another site, like this

 <button class="floating-btn" @click="openPopupTab"> <img src="/images/fab.png" class="fotoSticky"></button>

and this is the methods

<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() {
      window.open('https://jai-indonesia.com', '_blank', 'width=300,height=600');
    },
    }

  
};
</script>

What I wanted to do is to change the frame of the new popup window, using an image, I have an image of an Iphone's mockup, and I want to use that image as the frame of the new popup window,

I have tried using custom css like background, and background image but it still doenst meet my requirements, because the image will be inside the window, but I wanted the image to be the window (the frame of the new popup window)

How do I achieve that ? or is there another approach to achieve this?

Upvotes: 0

Views: 285

Answers (1)

Harvir
Harvir

Reputation: 131

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}`);
}

Upvotes: 0

Related Questions