[lonesome_wolf2000]

Hey everyone,

I've been trying to find some better way of popping up images on the site im making. I have been using this method:

<a href="#" onClick="window.showModalDialog('jpg/pic.jpg','','dialogWidth:526px;dialogHeight:404px'); return false

The only problem is Netscape, Firefox, and pretty much anything other than IE won't display this box. Does anyone have a better way of doing this? I tried the window.open method and it works, but the box isn't as neat as this. I can never get it completely flush against the image.

Thanks in advance.

[Shadow2531]

Just make your own div-popup.

<script type="text/javascript">
    function rm() {
        document.body.removeChild(document.getElementById("modal"));
    }
    function showModalDialog(pic,w,h) {
        
        var d = document.createElement("div");
        d.style.position = "absolute";
        d.style.backgroundColor = "#fff";
        d.style.left = "25%";
        d.style.top = "15%";
        d.style.width = w + "px";
        d.style.height = h + 20 + "px";
        d.style.border = "2px solid #000000";
        d.style.textAlign = "right";
        d.id = "modal";
        
        var i = document.createElement("img");
        i.src = pic;
        i.style.width = w + "px";
        i.style.height = h + "px";
        
        var l = document.createElement("a");
        l.href = 'javascript:rm()';
        l.appendChild(document.createTextNode("X"));
        l.style.position = "absolute";
        l.style.right = "8px";
        l.style.top = "5px";
        l.style.color = "#000";
        l.style.textDecoration = "none";
        
        d.appendChild(i);
        d.appendChild(l);
        
        document.body.appendChild(d);
    }
</script>

<a href="#" onclick="showModalDialog('zipped.gif',526,404); return false">show</a>

The div is not moveable like a window, but it can be made to move with some extra work.

The width and height specified in the event call are to specify what size you want the image to be displayed at. The div size is relative to the image size with a little extra space on the bottom.

Adjust the script as needed.

[lonesome_wolf2000]

Hmm...

Interesting.

Thanks for the info... I'll see what I can do and try to tweak this to what I'm looking for. Really cool! Thanks a bunch. I was never really that good with making things like this...

thanks again

[lonodev]

I am creating a new window by using HTML instead of calling a page from the server.Now,I would like to make this new window modal.I thought of using showmodaldialog available in IE but we can't tell it to open an empty url like in window.open.

Example we cannot do window.showmodaldialog("")
But I can do window.open("") and then use the document.writeln to do my html for this new window,but this is not a modal window.
So I looked at the above piece of code thought I could tweak it to tell it as modal window.Could you give me a quick explanation of the above piece of code does so that I can use it to make my new window modal.

Appreciate your help.

Thanks.

[Shadow2531]

The code just builds a div element with the img code, and X link insided it.

When you click on the link, it just adds the div to the document. When you click the X, it just removes the div from the document.

The div appears on top because it has position:absolute set for it.

The size of the div and image are determined by the values you pass to the function as you'll see in the link.

The left and top position set for the div determine where the div will popup at on the screen.

The properties set for the elements in the code are css properties.

Basically it creates

<div id="modal" width="" height="">
    <img src="" width="" height="" />
    <a href="javascript:rm()">X</a>
</div>

The x link has an absolute position inside the div.

The values for the width, height and src attributes are determined by what values are passed to the function by the 'show' link.

[lonodev]

Thanks for the explanation.Let me explain little more..what I am trying to do and then may be you can help me.
I am creating and opening a new pop window using HTML in JavaScript so there is no page on the server that has to be fetched to display the pop up.Now I would like to set the new pop window that was created to be a modal.I cannot use the showModaldialog function..as I have to sepcify a page to load.
I need a way to tell the browser to open the new pop window that was dynamically created as modal.
Can you help me?

Appreciate your help.

Thanks.

[Shadow2531]

You can only create modal windows in IE.

So all you can do is write() stuff to the window like this.

var w = window.open("","popup");
w.document.write('<a href="javscript:this.window.close()">close this window</a>');

which you have already done. You can of course control the size of the window that pops up. (If the browser settings allow it)

Now if you want to build the html and append to the window document, you can, but it'll only work in Firefox.

So basically, write the html to the window like you are doing and just have a this.window.close() link.

Of course that's repetitive because the person can just close the window without the link.

If you want to avoid all that, write the popup div to the current document like shown above.

Not sure of any other ways to do it.

[Shadow2531]

The window.open method should be fine, if you do it like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us">
    <head>
        <title>Popup</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <meta http-equiv="content-style-type" content="text/css"/>
        <meta http-equiv="content-script-type" content="application/x-javascript"/>
        <meta http-equiv="content-language" content="en-us"/>
        <script type="text/javascript">
        //<![CDATA[

        function popup() {

          var w = window.open("","_blank","left=200,top=200,width=300,height=130");
              w.document.write('<html><title>popup</title><body><div>')
              w.document.write('<img src="http://www.google.com/intl/en/images/logo.gif" alt=""/>');
              w.document.write('</div></body></html>');
              w.document.close();
              w.focus();
         }

        //]]>
        </script>
    </head>
    <body>
        <div><a href="javascript:void(popup())">popup</a></div>
    </body>
</html>

[nonane]

Couldn't you do a "onLostFocus" or "onBlur" event to execute w.top.focus(); and force you to keep that window on top?

[Shadow2531]

You can use the onblur event to automatically switch focus right back to the window.