Hi,
I've tried to build a web gadget for Spaces. I'd like to implement a behaviour like when I click Customize while editing my spaces: it will popup, let's say a MODAL FRAME. And this frame can render a new URL inside it like another windows of the browser. And this should be cross-browser compatible!
I have used iframe and make it invisible at the first time. If this is the right way, where should I append this iframe
Is there anyway to do that Thanks,
Bao Nguyen

Popup modal frame from web gadget
amendez
Thanks. This maybe a workaround solution.
Is there any other solution for the problem like I said: not popup a new window, I mean same with clicking Customize link and popup a windows for changing Themes, Layout...
Is it done this way
Thanks,
Bao Nguyen
Qiuwei
Those are Div tags that are hidden or created on the fly, then displayed and positioned accordingly, when a link or button is click, it's commonly referred to as DHTML.
It's pretty easy to do, to get examples of how to do that stuff, you can go to http://www.dynamicdrive.com/. You might have to manipulate some of those examples to work with gadgets.. Just keep in mind the popups are confined to the gadgets iframe..
Just remember to call the p_args.module.resize command after you show the DHTML, so the gadget will re-adjust it self vertically, you can't go wider then the gadgets width.
kfindev
This is what we did with the 4Gamebox gadgets.
Create a function to define your popup, something like this:
function popitup(url)
{
var newwindow=window.open(url,'name','height=500,width=500,top=125,left=275');
if (window.focus) {newwindow.focus()}
return false;
}
You can define what ever window you want with or without bars, resize, width, height, where it should appear on the user desktop.
With the newwindow.focus, the popup is ontop of all windows.
Create an element with an attachEvent, something like this:
yourlink = document.createElement("p")
yourlink.innerText = "some text"
yourlink.attachEvent("onclick", mypopup)
Next make the function mypopup:
function mypopup()
{
yourlink.link=("onclick", popitup('http://url_to_your_file'));
}
Remember to detachEvent in your dispose method.
Disposalist
Unfortunately, there isn't a way to pop it up outside, the sandboxed gadgets Iframe.
I've done pop-ups two different ways. If you use an I-Frame That links your your personal site...
Created it like this.. (From my first gadget) ToddOS close your eyes for a second.
p_elSource.innerHTML = "<iframe id=\"PollGadget\" src=\"" + url + "\" frameborder=\"0\" style=\"width: 100%; height: 250px; border: 0px;;background-color:transparent\" allowTransparency=\"true\" scrolling=\"auto\"></iframe>";
Then you can open up a secondary window and have a callback to your webpage and do customizations that way. In order to see what I'm talking about. Add the "Poll" gadget to your spaces site.
Located here: http://gallery.live.com/liveItemDetail.aspx li=fcb9f616-e4e4-4b2b-9f16-236f6eac7c88&l=1
And click on the customize button and change the colors. Just keep in mind you can only do an outside window popup with a call back if it's launching from a page that you are hosting.
ToddOs, you can open your eyes now.
Secondly, you can create a smaller DHTML popup that will fit inside the gadgets Iframe, but you have to be careful about the width of it. I did this recently for changing colors also, I can provide you a link when I publish it on Monday. But you have to grow it vertically and use the resize command.
Thirdly, a really cool way to do customizations, would be to use tabbing, ToddOs has an example of this.. where you can click on the customize tab and have the customizations there.
Forthly, You can remove all the controls, in the p_elSource and redraw the screen as a customize screen on a button click. or have mulitple divs and just hide the div's you do want to show at the current time.
There's probably a few other ways to accomplish what you want, you might have to change the User Interface you had in mind.
giddy
There's noway to pop it out of the gadget's area