Popup for all pages

#1

I’m trying to create popup for all pages of my app. Which is the best way to do it? I would like to have an external file with ‘template’ and ‘script’ tags.

First I’ve tried to make a router component this way: in routes.js

{
path: '/settings',
popup: {  
  componentUrl: '../pages/components/widgets/settings-popup.f7.html',
  on: {
    popupOpen: function (popup) {
      console.log(popup);
    }
  }
}

},

and in settings-popup.f7.html:

<template>
  <div class="popup">
    <div class="view">
      <div class="page">
        <div class="page-content">
          ...
        </div>
      </div>
    </div>
  </div>
</template>

However, when clicking link with href="/settings", I’m getting “GET http://localhost:8080/pages/components/widgets/settings-popup.f7.html 404 (Not Found)” in console.

Also I tried to create popup with app.popup.create() but I can’t figure out how to provide ‘content’ property with path to file, all examples provide only hard-coded HTML layout.

#2

Your example seems to be the correct way to load a router component with popup content. But it looks like your file path is incorrect, might have something to do with the leading double dots.

Can you post a screenshot or directory listing of how your files are organized?

#3

image
image1043×691 57.3 KB

Hope this will make it more clear. Thanks for helping!

#4

We can’t see what the root of your webserver is. Something goes wrong with the file path. Can you try to leave out the leading dots and slash in the route? Like this:

componentUrl: 'pages/components/widgets/settings-popup.f7.html'

#5

Why do you use componentUrl if you use Webpack where you should just import component and specify as component. Do it in the same way as you imported pages

#6

It didn’t work anyway. However, yesterday I made it work by importing component, like nolimits4web says below.

#7

Yes, I made it work yesterday this way, thank you. By the way, could you please give me an advice - I use pushState parameter for my app, however I don’t want to open new page when user opens popup window. For example if I open popup with settings from clients page, I get redirected from http://localhost:8080/#!/clients to http://localhost:8080/#!/settings.

I tried to place pushState parameter this way, but it doesn’t work

 {
path: '/settings',
popup: {  
  component: Settings,
},
view: {
  pushState: false,
}

},

Which is the best way to make popup available from all pages? Thank you.

#8 
{
  path: '/settings',
  popup: {  
    component: Settings,
  },
  options: {
    pushState: false,
  },
}
1 Like