Open a static page/section into a modal

Hi everyone!

Is it possible to show a specific static page inside a modal without copy/paste the page into it?

is there any script or code that can do that?

Thank you!
G.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

A modal with <iframe> inside?

How do I use the iframe? do I have to put the page’s url inside it?..I was thinking that maybe it can be more practical if I can I do it with sections?..like linking the Iframe to a section of another page so it will only shows me that section.

can you give me a practical example with a read only link please.

I attached an image that explain what I’m trying to achieve.

Thank you!

I used this to make the iframe responsive.

I can see my page but the images are not there. I tried to figure out why and I realised it is related to their size…(if they are too big they won’t show).

Although the problem only shows in Safari. (it seems to work in Chrome). How come?

Fancybox3 will give you a great solution for this idea (cost $29 for one project -or- 129$ for Unlimited projects).

The implementation takes less than three minutes. And you get a lot of custom ideas (Like progress loading, history (Close by back btn on mobile), close by touch gestures, close by esc key and so on).

Example:

Plugin site:
https://fancyapps.com/fancybox/3/

All you need to do after you load the assets is to add 3 custom attributes:

And href javascript:

  <a data-fancybox data-type="iframe" data-src="https://codepen.io/about/" href="javascript:;">
    Example #1 - Webpage
  </a>

So again :slight_smile: very clean and easy.

is it possible to open a specific section of a page in a modal?

Yes. This is a url issue (Use #id) - this is not related to iframes. The site you open should have id for some-section.

Example:
data-src="https://mysite.com/anchorslinks/#my-anchor"

can I do it even without Fancybox?

let’s say I give the an id to my section id=“project01” and it is situated in a hidden page called “design projects”.

how do I link it to the iframe?

if I have to use Fancybox where can I find the documentation or a video that shows how to install it in Webflow?

I will guide you about fancybox (Really easy). Anyway first use fancybox cdns (Before you buy). And purchase the licence later if you decide to use this plugin.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

iframe without plugin

Hard to answer - but try to use this src (With #project01)

src="https://my-website.webflow.io/design-projects#project01

And follow the ideas her:
https://stackoverflow.com/questions/9687085/jump-link-inside-an-iframe

https://stackoverflow.com/questions/15646782/anchor-links-inside-iframe-does-nothing

Thanks, I really appreciate it!

I tried Iframe without plugin. it’s not working for now.

I found this useful link: javascript - Show div from another website - Stack Overflow

it’s done by using JQuery but I don’t know how to install JQuery in Webflow…also it should be easier in my case because I know the id of the section and the section is also inside my website.

Do you know how activate JQuery in Webflow?


where should I put this? does it go into the footer in the “>project settings>custom code” ?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

This line can be placed in the page setting => custom code => before </body> tag

I did but it doesn’t work. can you have a look at it for me and tell me what I’m doing wrong?

here is the read only link https://preview.webflow.com/preview/giuseppe-bufalo?utm_source=giuseppe-bufalo&preview=0c5cf994577180a75803d3c23dfcd0a6

the page is called “modal template”, I m trying to connect it to the page “concept design”, so I can show a section of that page in the modal.

Thank you,
G

Can you share the published page link?

https://giuseppe-bufalo.webflow.io/modal-template

Hi - If I use an URL inside the iframe it won’t display the images when I open the website in safari so probably it’s better to link it in another way. So I want to use ajax to show only one section of a page into a modal.

This is my source: https://preview.webflow.com/preview/ajax-content-load?utm_medium=showcase&utm_source=ajax-content-load&preview=e55cc7510c1f2bb970c47258e369eaa4

I am trying to achieve this by replacing the WEBSITE URL with ‘javascript:loadcontent(’SECTION ID’); and by putting this script into the Before tag in the homepage.

<script> function loadcontent(cid) {
$('#viewport').load('content #' + cid);} </script>    

I can’t make it work because I’m missing something in the last step….or maybe there is another way to achieve that.

This is the link to the website: https://preview.webflow.com/preview/giuseppe-bufalo?utm_source=giuseppe-bufalo&preview=0c5cf994577180a75803d3c23dfcd0a6&mode=preview

At the moment I’m trying to test this on the “Mech Exo-suit” in the “Home” page and link it to the one in the "Models” page.

I would appreciate if someone can help me with this.

Thank you a lot!