Simplify DHTML Modal Window

[djr33]

1) Script Title: DHTML Modal Window

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...dhtmlmodal.htm

3) Describe problem:
This isn't a problem, per se, but a request for a simpler version.

I've looked at a lot of options for "lightbox" type embedded windows, and I haven't found one that is simple enough.


If there's an alternative out there, I'll be happy with a link-- no need to modify this script. It's very good as is, but just not as simple as I'm looking for.


Here's what I want:
1. It can be called from a javascript function (with parameters if needed, not sure about the details there)
2. It creates a PLAIN window. I don't want anything in it. The transparent background surrounding it is optional (though a nice option).
3. Within that PLAIN window, I want to have a div I can populate with stuff. For example, Ajax content, or an image. If instead the script can automatically do this, that's fine, but there's no reason it can't be combined with other scripts to do that. I don't mind.



Basically I want all the setup stuff: a centered popup window above everything else with built in open and close functions that can handle content.

But I don't want any of the styling or complexities that are in every single similar script I've found.
In fact, this script isn't too bad compared to some.

I also want the option to at least remove all of the "window controls" possibilities: scrollbars optional [should be based on content], NO drag to move, NO drag to resize, no minimize, no maximize. Just the basics. An optional close button would of course be useful but I'd like to not have that as a default because it can be cleaner to include it in the design.


I may be able to modify the Javascript enough myself to remove all of this (I've already started a bit), but I'm confident that if done correctly the script can be a lot lighter (and simpler to use?).




By the way, a few notes on the script:
1. The blackdot.gif file is many times larger than it needs to be-- it can get down to 44 bytes if compressed well (using photoshop for example). I can upload this if that would help. I don't really care about 800b vs 44b, but some might.
2. I tried to change the black color to red [as per client request] and it made the screen flicker. I wonder if there's a way around that, but obviously this must remain black.
3. I think there are probably better ways to do the transparency, though I'm not sure about them... For example, a png with alpha, plus some IE6 hack if anyone still cares.




And I don't mean this to sound like I'm complaining too much-- just been designing for a while and it's odd that I can't find something that fits. I feel like surely someone out there must want to have a simple way to pop up a div and put something in it without all the fancy stuff. Ajax is also part of it, but certainly not a requirement. (In fact, at the moment I'm using an iframe which in some ways is simpler and probably more reliable at least at the moment until HTML5 comes or something...)

[djr33]

I've managed to strip it down to a very clean level.
Though now it's aesthetically pleasing, the code isn't.

So it's not really a time sensitive issue, but something that'll be helpful in the future, and I think it would be a good addition to the library anyway, because I think others would find it useful.

[ddadmin]

Is the main goal just to cut down on the file size of the .js files? If so you might try running the script through a compressor. The YUI compressor for example doesn't care that there is no semi colon separating each JavaScript statement within the target script, which there aren't with this one. If your goal is more for aesthetics reasons and you have difficulty removing a certain component, please let me know.

[djr33]

It's entirely for aesthetics of the page.

The only reason I care about the code not being messy once it works is for ease of maintenance, etc.


I managed to strip everything from it but I expect that I did it the "wrong way" [probably a few wrong ways].

Nothing I did is going to be a problem for any browser in particular (I don't see why it would be), so I think it's going to serve the current purpose.


I just would like in general a more basic div-opening + content-loading script that doesn't have all the extra features.


Basically I made the window "chromeless", kept the semitransparent overlay, and removed all of the fancy bits except for the X to close the window.



The one thing I could not figure out how to remove was the close X.
When I removed it, the window would close (from a JS link using parent.) but the modal overlay remained.
(This isn't really a problem, though. It may be helpful to users.)




I hesitate to link to the page at the moment because I'm developing it for someone, but I suppose it won't hurt anything (I may remove the link later).
It's also very "under construction", but it'll give you an idea of what's going on.

I realize that the fact that I'm calling these functions through flash isn't simplifying anything, but all flash does is call the function bcprlink(pageurl) which is defined in the source. It gets the height/width of the browser then generated a window:
contentwindow=dhtmlmodal.open('contentwindow', 'iframe', url+'?content', url, 'width='+(curWidth*.6)+',height='+(curHeight*.7)+',center=1,resize=0,scrolling=0')

Here's the site:
Removed link-- the site has now gone in another direction. The question remains, though, because this would be a nice feature.
If someone can help with this and wants to see a copy of the scripts/css I can upload them somewhere else. Since it's already a script on top of another script, it would be a lot of code to post here.


The code is a bit messy at the moment, but I hope that doesn't get too much in the way of checking the script.



As I said, this works for now. This project prompted me to post this, but I've been looking for something along these lines for a while now for several possible uses.

For all of my current plans, it will load using Ajax (or an iframe), but I can see other cases where preloaded content (in a JS var, for example) would be useful, or just an image.