Help with responsive modal window...

User 2796380 Photo


Registered User
94 posts

Have hit a brick wall with FF Modal Window component. What I want to do is "click on a img" have it open the Modal window getting its data "external" from a sub domain folder containing a large number of responsive FF HTML pages and a few pdf documents. I have had help on forum but that is not the method I want to use so hope I can get help here.

My present static website I build using a 3rd party LIKNO Software to do the above but is not responsive. Then I would have a responsive FF home page open a fixed size modal window containing a responsive FF document.
I think the latest Likno version is responsive but my preference is to use FF totally. From the forum help, I know how to hide a container on the page and copy & paste from the FF html pages using FF modal window component. I rather not do this procedure. I really want to have all html documents pages in one doc folder.

First question, are the attributes needed installed in FF 6.3 or if not can they be installed?

Second question, if yes, I need help on steps to complete this. As a coder I am dangerous so keep it simple.

If I moved my document folder from "external" (located in a sub domain) into the website Root you would normally use Ajax. I understand you can't use Ajax if there is JS in the documents which I assume is true by looking at source code so back to "external" method.

Another problem, I have a background picture and want to have another img. slide in from the right pause and slide out then another picture does the same on top of the background. How do I do that?

Here is my work in progress website: http://demo.ezorbcalcium.com/ezorb-store.html
Larry Penny
User 2796380 Photo


Registered User
94 posts

Found that I already have Responsive Slider. Hope it will tell me how to use it in RFF.

The other questions I think need to be answered by CC FF designer or coder.

Does anyone know where you can find out what all of the attributes are used for and how to use them?
Larry Penny
User 187934 Photo


Senior Advisor
18,749 posts

I would look at this page.
http://foundation.zurb.com/sites/docs/reveal.html
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2796380 Photo


Registered User
94 posts

Eric Rohloff wrote:
I would look at this page.
http://foundation.zurb.com/sites/docs/reveal.html


I found this doc also today and have been studying it. This is part of what I was looking for. I am going to setup a test page and see if I can figure out where to put the code using RFF.
I have been reading a few of your posts and you seem to be a coder so when I get to a big bump would you see if you can figure out what I am doing wrong with code?

Thanks for the link,
Larry Penny
User 187934 Photo


Senior Advisor
18,749 posts

Sure, Just give it a try and if you have issues share a link so we can see it.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2796380 Photo


Registered User
94 posts

Eric Rohloff wrote:
Sure, Just give it a try and if you have issues share a link so we can see it.


@ Eric or any Code savvy designers,

Here is the test site: demo.ezorbcalcium.com

What is suppose to happen: Click on "About Us", modal window opens and modal window page is filled with about-us.html document that is located in folder "main-doc" that is located in website root.

My preferred way is using RFF modal window compoent. I am to the point of pasting some code that will go to main-doc folder and get about-us.html then fill the modal container. I think the code should be "<img src="./main-doc/about-us.html" onclick="Modal1();"/>".
When I use the HTML element it does not work, code is placed outside the modal container. So I can not figure out how to insert "<img src="./main-doc/about-us.html" onclick="Modal1();"/> into RFF.
In fact just how do you see the html code and insert code?

Should the path be "../ instead of "./? I don't think so. Does the about-us.html page (created with RFF) need to have some ID or Class code?

I don't know if all the code that Zurb uses is in the CC RFF like JavaS files or not. Have not been able to get CC to reply. When i go to the Zurb page you sent me to to find definitions of attributes I noticed ZURB has about 20 modal window examples where CC has only one. I may be wrong but I think CC needs to have CC RFF to be up to date with all things that are included on Zurbs website including finish CC User Guide. What CC has so far is an excellent tool.

Some of the answers I think need to come from CC code designers on how to & JS since they designed FF & only installed 1 example, example8. Is the JS needed installed for the other 19 modal examples?

Here is a Zurb Foundation example http://codepen.io/rafibomb/pen/kXEwWq which is more compacted than what I want to do. Just where and how do you put that JS code into CC RFF.

My second method is using Likno Modal Window Builder, latest version is supposed to be responsive. I don't want to buy this program if someone out there will help solve the problem.

It is the easiest to use because it will insert code <!-- ******** BEGIN LIKNO WEB MODAL WINDOWS CODE FOR likno-modal-project ******** -->
<script type="text/javascript">var lwmwLinkedBy="LiknoWebModalWindows [1]",lwmwName="likno-modal-project",lwmwBN="270";</script><script charset="UTF-8" src="../likno-scripts/likno-modal-project.js" type="text/javascript"></script>
<!-- ******** END LIKNO WEB MODAL WINDOWS CODE FOR likno-modal-project ******** -->

into all of the my-doc.html's automatically. My build 270 that I have, is static only but will work as far as getting window to open as modal. So far can not get it to work may be path problem.
Please overlook the rambling just trying to provide all information needed.
Larry Penny
User 303390 Photo


Registered User
92 posts

Instead of a separate aboutus.html, take the contents of that html page and place it inside the code of the modal.
This solves all your problems.
The use of iframe is another method for doing the way you want.
User 2796380 Photo


Registered User
94 posts

Webby wrote:
Instead of a separate aboutus.html, take the contents of that html page and place it inside the code of the modal.
This solves all your problems.
The use of iframe is another method for doing the way you want.

Modal Windows has several methods:Embedded (method you suggested), Page Element
, Image (FF Modal included), Ajax, and External (iframe).
I have already created a multitude of RFF doc.html pages and doc.pdf pages. The Embedded method is OK for a few doc.html. I also have doc.pdf pages and also need to pull content in from external websites. I have too many doc.html and doc.pdf pages that have already been created including meta tags. Instead of having pages embedded in various website pages I prefer to have all doc's in one common folder. My present static website uses External method. Zurb left out Ajax in FF6.x but gave code to add back in, Zurb says is simple to do. It does not seem be simple in CC RFF. How do you add the code back in and how do you use the iframe method in details.
I know how to use Embedded and Image methods that's really simple. I need both Ajax (local html pages) and External (iframe for pdf and other websites) or could use just External. This should not be that hard to do.

Thank you for your future help in advance,
Larry Penny

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.