Flash & HTML5 Modal Window popup

[Hopki]

Hi,
This has only been tested on a Mac and with Safari, Firefox, Chrome and Opera.
Works in Flash and HTML5 and the size of the window can be adjusted.

This can be used for Hotel booking forms, checkout pages and such like as well as popup information pages. When the window is open you can not interact with the panorama until it is closed.

1) First make your html page that will popup. I used TextEdit and saved as an HTML page. In the attached example I saved two, pop1.html and pop2.html and put them in a sub folder called modal pages.

2) Add a button or point hotspot and give it the action:

Code: Select all

Mouse Click => Go To URL => URL: javascript:modalWin(); => Target:

In the attached example I use:

Code: Select all

Mouse Click => Go To URL => URL: javascript:modalWin1(); => Target:
Mouse Click => Go To URL => URL: javascript:modalWin2(); => Target:

To open two different pages.

3) Add this to the head section of your HTML page:

Code: Select all

<script type="text/javascript" >
                function modalWin1() {
                    if (window.showModalDialog) {
                        window.showModalDialog("modal pages/pop1.html","Test Modal","dialogWidth:255px;dialogHeight:250px");
                    } else {
                        window.open('modal pages/pop1.html','name','height=255,width=250,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,modal=yes');
                    }
                }
        </script>

The attached project has this code twice to open the two windows, of course the code is slightly different in each to open the diffrent windows. There is probably a better way to do this rather than just copy it but it works.

The attached project has two information buttons and two point hotspots that opens the modal windows. The index 2 page has the additional code for the modal windows.

Have fun,
Hopki

[malaga360VR]

I will like to know if this method can be used in a jQuery Modal window popup.

[url]http://gardengnomesoftware.com/forum/vi ... t=8001/url]

[Hopki]

Hi,
I have not tried, why not give it a go.
Regards,
Hopki

[malaga360VR]

maybe this Plugin can help

On Demos " Image " , I like a lot the results , a popup window absolutely scalable .

For the image pop up code looks simple

<a href="img/img2.jpg" class="nyroModal" title="3rd Street Promenade">Image</a>
<script type="text/javascript">
$(function() {
$('.nyroModal').nyroModal();
});
</script>/quote]

But really I dont know how to implement this in a project , looks like you make a independent function for each image and must be included on index.html , but in the example he uses always the same function with

<a href="img/img2.jpg" class="nyroModal" title="3rd Street Promenade">Image</a>/quote] this pointing to each image.

Im not a programer so I really don't know if this can be possible.


files needed :

<link rel="stylesheet" href="styles/nyroModal.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/j ... "></script>
<script type="text/javascript" src="js/jquery.nyroModal.custom.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="js/jquery.nyroModal-ie6.min.js"></script>
<![endif]-->
<script type="text/javascript">
$(function() {
$('.nyroModal').nyroModal();
});
</script>

[MFauvin]

Hi,
When I click on the hotspot, pop1(or pop2) appears at the top left. I want to change this location. I searched but not found how to change it.
For example Place it in the middle.
Regards,
Mam

[Tong]

Anchor: Depending on which part of the Anchor's grid you choose, the Anchor will determine where the skin will "stick" relative to the movie window. For example, if you click (choose) the bottom center section of the grid, your controller or image, etc., will always be on the bottom center of the movie.

http://gardengnomesoftware.com/wiki/Obj ... itor_Panel

[MFauvin]

Hi ,

In the example given by Hopki, pop1.html appears by default in the upper left. It is possible to change the size of the window (dialogWidth:xxpx;dialogHeight:xxpx).Hopki, is it possible to add a line of code to specify the location of the window pop1.html?

Regards,

Mam

[DanielSan5]

Hi,

thanks for your answer in my topic, Hopki. I've tried to create a pop up with javascript and it works fine, but i don't know how to place the window in the middle of the screen? Is it necessary to write another line in the html-code to exert influence on the location of the pop up or is there another way?

[Hopki]

Hi,
Project in the first post modal.zip the popup should open in the middle of the screen?
Regards,
Hopki

[DanielSan5]

I have tried "index 2.html" and it works with firefox. In IE and chrome there appears an error message. Also the popup "This is a modal window" is not in the middle of the screen in firefox. It's in the left upper corner in the near of the second tab of the browser window. So is there a problem with some older attributes/commands in the javaScript?

I have also another question^^. Is it possible to create an popup for polygon hotspots? I want to give a polygon hotspot an url and when you click on the hs a new window appears. It would be fine when the window size would be a little bit smaller then the pano in background. At the moment i try to generate a new html file that opens with a smaller size. I don't think that this is a good idee because i only can influence own files. It would be nice to take influence on the size and position of other websites. Hope you can understand my problem^^

[DanielSan5]

Ok, i found the following rules:

Two rules:

1) Can't resize a window/tab that hasn't been created by window.open.
2) Can't resize a tab if the tab is in a window with more than one tab.

So it's not possible to create a main window with an absolute size (i've tried with <body onload="window.resizeTo(500,500)"). If i understand the only possibility is to generate a popup with open.window, but how can I realise this with polygon hs?