#modal_container
Just assign specific width to your #modal_container (in this case 650px wraps everything nicely) Also I don't know if it was intended to be that way but those scrollbars inside container don't look quite right. I would remove "overflow: auto" :)
You can definitely use "_" in class names, take a look at these specs: (http://www.w3.org/TR/CSS21/syndata.html#q6)
Posted April 22nd, 2007 at 11:22am by kangax
Hi Kangax,
Thanks for the help, but as my original post mentioned : "...without assigning a specific width to #modal_container, because the contents of the HTML being called will be different sized each time."
If modal_container was a table and not a div, this would be a non-issue, since tables don't extend further than the body content and are 100% dynamic.
That same class applies to straight-up images of various sizes, html pages of various sizes, etc. -- it cannot have a specific width.
Posted April 22nd, 2007 at 5:46pm by jyeager
The problem here is that modal_container, when opening, is setting a width to take all the viewport space. I just realized that the html that's been inserted into container (http://www.vilverset.com/pics.html) is what's causing the problem. That content is apparently wrapped into a table which stretches all the way to the left and to the right. All you have to do now is make that table wrap content tightly :)
Posted April 23rd, 2007 at 7:04am by kangax
Ok, I finally got it! Remove align="center" from table inline style (http://www.vilverset.com/pics.html) and you're all set :)
Posted April 23rd, 2007 at 7:11am by kangax
You are correct, that did it. Thanks Kangax. =)
Now how would I go about creating a link that takes you to ANOTHER overlayed image (or HTML page) without breaking from the dark background and the original page underneath?
I tried a normal link, and naturally, that didn't work. What would I have to do to the link to make it work?
PS: I don't want to go one level higher... ie, I don't want a pic over a dark layer over a pic over a dark layer over the original page... I want to stay on the SAME level... only 1 dark layer... so never higher than 2 levels up. A kind of "NEXT IMAGE" link, if you will.
Posted April 24th, 2007 at 1:19pm by jyeager
I am pretty sure Control.Modal wasn't designed to support nested windows, so to do what you're asking for one would need to change a source code : )
Take a look at the code on this page (http://yura.thinkweb2.com/javascript/modal/). That's as far as I went before realizing that it would be really inconvenient to create nested windows without native support...
Posted April 25th, 2007 at 12:21pm by kangax
Not sure we understand eachother. =) As I mentioned last time, I DON'T want nested windows. I'm asking if it's possible to add a "next image" button that allows you to move to the next image without returning to the thumbnail page. Nowhere am I asked for widows within windows, or even windows over additional windows.
I'm thinking of a linear/juxtaposed movement, not a stacked/superimposed one.
If I can go back and select the next image, why can't I create a shortcut that goes right to that next image without going back? Flush the current image and display the next one, without ever going back, or "ungraying" the background.
Posted April 25th, 2007 at 3:20pm by jyeager
OK, I see what you mean... Just attach function to links inside modal_container that updates contents with another image. I'll put an example if I have enough time tomorrow : )
Posted April 25th, 2007 at 10:26pm by kangax
If you click the 3rd thumbnail (1st column, 2nd image) in this example... http://www.vilverset.com/jim.html
...you will notice that #modal_container is 100% wide on FF, but wraps tightly around the HTML in IE6. We can see this because of the thin white border on said container. But normally, there would be no border.
This means that in IE6, I'll be able to click on either side of the HTML being called to return to the page underneath, while on FF, I can only click above or underneath.
Is there any way. in FF, to force #modal_container to wrap tightly around the HTML being called like we see it do on IE6? Not sure how IE7 reacts to it yet but I'd like the tight-wrap everywhere if possible (without assigning a specific width to #modal_container, because the contents of the HTML being called will be different sized each time).
PS: Is it wise to use "_" in class names? I was always told to avoid it (and to use "-" instead).
Posted April 22nd, 2007 at 8:34am by jyeager