Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Albert on Jun 26, 2009 00:22
open dhtmlx forum
Modal window problems with IE6/7/8 and Safari 4

I have same problemes with modal windows on both IE and Safari.

Modal windows works fine with FF, but I've found some problems with other browsers.

IE
- Don't "greys" all the window: Solved using viewport attached to a div that fill all the window.
- centerToScreen no works: Partial solved no including <!DOCTYPE header. Is a bad solution but ....

Safari
- Don't "greys" all the window: Solved using viewport attached to a div that fill all the window.
- centerToScreen works in a very special way. It centers the window in the screen, but if you have a large page the view is set to the end of the page, so the window "disappears" and you have to scroll to find it.

Do you have any ideas to solve this problems???

Using viewport is not the best solution and would be great that modal windows works the same way on all the browsers.

thanks
Answer posted by Alex (support) on Jun 26, 2009 05:51

Hello, 

the problem with doctype will be solved in the next windows version (it is planned for July, in several weeks).

The "modal windows" functionality won't be changed. 

Answer posted by Albert on Jun 29, 2009 08:58
Great, but someone know how to "simulte" de FF centerToScreen functionality in Safari?
Answer posted by Alex (support) on Jun 30, 2009 01:08

Hello,

you can call method scrollTo to scroll page to the window position:

var win = dhxWins.window(id);

win.center();

var pos = win.getPosition();
window.scrollTo(pos[0],pos[1]);

Answer posted on Jul 01, 2009 06:46
I'm sorry Alex,

But I tried this and it seems that doesn't work.

I have also discovered that FF 3.5 don't "greys" all the window, as happens with IE and Safari 4.
Answer posted by Alex (support) on Jul 01, 2009 07:07

please provide sample to reproduce the issue.

Answer posted on Jul 01, 2009 07:44
Hi Alez,

Thanks for your help.

I tested on a large page, generated with PHP.

I put the application a test server and you could find the form on which is used on http://demo2.eventszone.net/myCongress/form.php if you press "Haga clic aquí para enviar una fotografía" you will see a modal window, but if you scroll down ......

If you need something more to test dhtmlxwindow, please tell me.

Albert
Answer posted on Jul 01, 2009 08:05
I copy paste the main parts of the code here:

......
<script type="text/javascript" language="JavaScript">
    var dhxWins;
   
    function loadDHTMLX() {
        dhxWins = new dhtmlXWindows();

        //dhxWins.enableAutoViewport(false);
        //dhxWins.attachViewportTo("myCongressContainer");
    }
</script>
</head>
<body onload="loadDHTMLX()">
.....
<div id="myCongress">
.......

    <script type="text/javascript">
        var win = null;
        var index = 1;
        function openDialog(linkCode, moduleCode, fieldName, fileType) {
        var win = dhxWins.createWindow("dialogFile", 100, 100, 500, 250);
        win.setText('');
        win.attachURL("form.fileUploader.php?linkCode=" + linkCode +
                        "&congressCode=<?= $myConfig->sActiveCongress ?>" +
                        "&sActiveLanguage=<?= $myConfig->sActiveLanguage ?>" +
                        "&moduleCode=" + moduleCode +
                        "&fieldName=" + fieldName +
                        "&fileType=" + fileType);
        win.clearIcon();  // hide icon
        win.denyResize(); // deny resizing
        //win.denyMove();   // deny moving
        win.denyPark();   // deny parking
        win.button("close").enable(); // disable "close" button
        win.button("park").hide(); // disable "close" button
        win.button("minmax1").hide(); // disable "close" button

        win.centerOnScreen();
        //win.setPosition(null,100);
        win.setModal(true);
        dhxWins.setSkin("modern_blue");

        //var pos = win.getPosition();
        //window.alert(pos[0] + ":" + pos[1]);
        //window.scrollTo(pos[0],pos[1]);

        index++;
        }

    </script>
.....
....

Answer posted by Alex (support) on Jul 01, 2009 08:10

Hello, 

please attach window viewport to some overall container - and modal area will have desired size. The sample is attached.

Attachments (1)
1246460978.zip85.84 Kb
Answer posted on Jul 01, 2009 08:23
Ok,

Thanks for your help. I reactivated the viewport and now works. The only problem that remains is the centering.
Answer posted by Alex (support) on Jul 01, 2009 09:34

>> The only problem that remains is the centering.

What is the problem. Can it be recreated on the sample that we've provided you ?

Answer posted by Albert on Jul 02, 2009 00:22
Hi Alex,

I send to you a clean test html file with a large page that will show you the problem.

I didn't tested on Opera. But the problem of centering remains on Safari 4 and IE 8. I don't have IE 7 or 6 to test it.

Thank you


Attachments (1)
myCongress.zip591.04 Kb
Answer posted by Alex (support) on Jul 02, 2009 01:31

Hello Albert,

window is centered inside the viewport. In order to show window in a certain vertical position you can use the following approach: 

...
win.centerOnScreen();
var pos = win.getPosition();
win.setPosition(pos[0],100);
win.setModal(true);

Answer posted by Albert on Jul 02, 2009 02:10
I'm sorry, but don't work.

I attach an image of the result in Safari.

In IE 8 if the link that click is in the middle of the screen works, but if the link is on top of the screen the result is the same that you could see on Safari.
Attachments (1)
Imagen 1.png192.11 Kb
Answer posted by Alex (support) on Jul 02, 2009 03:29

You can try to use the following method to scroll browser window to the top when dhtmlxwindow appears:

function loadDHTMLX() {
 ...

 dhxWins.attachEvent("onContentLoaded",function(w){
  window.setTimeout(function(){window.scrollTo(0,0);},1);
 });
}


Answer posted by Albert on Jul 30, 2009 03:15
Thanks for your help.

This solves the problem partially because I really need that the main window remains in the point where the user was filling the form before the message windows opens.

I hope that this issue will be solved in the next version of the suite, and that the modal windows works in the same way in all the browser ( I know that this is not easy ) and I appreciate your efford.

Thanks.
Answer posted by Albert on Jul 30, 2009 03:33
I've been looking in to the generated code and I have one question.

Why you create iframe instead of using div like prototype Window?
Answer posted on Jul 30, 2009 06:27

>> This solves the problem partially because I really need that the main window remains in the point where the user was filling the form before the message windows opens.

Try to use the new approach - locally it works as you need:

win.centerOnScreen();

var pos = win.getPosition();
var scroll =document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop;
win.setPosition(pos[0],(document.documentElement.clientHeight-win.h)/2+scroll);