?
Solved

Modal Window

Posted on 2005-03-29
18
Medium Priority
?
783 Views
Last Modified: 2011-09-20
Hi there,

is there anybody who can change this script so that the popup window will be modal?

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_openBrWindow(name, url, width, height, scrollbars) { //v2.0
        var w = screen.availWidth;
      var h = screen.availHeight;
      var centerLeft = (w - width) / 2;
      var centerTop = (h - height) / 2;
      if (!scrollbars) scrollbars = "no";
      var openParams = "scrollbars=" + scrollbars + ", menubar=no, toolbar=no, titlebar=no, status=n, resizable=no, width=" + width + ", height=" + height + ", left=" + centerLeft + ", top=" + centerTop;
      var oWin = window.open(url, name, openParams);
      oWin.focus();
      return oWin;
}
//-->
</script>
0
Comment
Question by:bilgehanyildirim
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 5
  • 3
18 Comments
 
LVL 32

Accepted Solution

by:
Batalf earned 1000 total points
ID: 13652081
Try something like this:

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_openBrWindow(name, url, width, height, scrollbars) { //v2.0
       var w = screen.availWidth;
     var h = screen.availHeight;
     var centerLeft = (w - width) / 2;
     var centerTop = (h - height) / 2;
     if (!scrollbars) scrollbars = "no";
     var openParams = "scrollbars:" + scrollbars + ",status:no,resizable:no,dialogWidth:" + width + ",dialogHeight:" + height + ",left=" + centerLeft + ",top=" + centerTop;
    window.showModalDialog(url, null,openParams);

     oWin.focus();
     return oWin;
}
//-->
</script>


0
 
LVL 32

Expert Comment

by:Batalf
ID: 13652095
Or more precise:

<script language="JavaScript" type="text/JavaScript">

function MM_openBrWindow(name, url, width, height, scrollbars) { //v2.0
       var w = screen.availWidth;
     var h = screen.availHeight;
     var centerLeft = (w - width) / 2;
     var centerTop = (h - height) / 2;
     if (!scrollbars) scrollbars = "no";
     var openParams = "scrollbars:" + scrollbars + ",status:no,resizable:no,dialogWidth:" + width + ",dialogHeight:" + height + ",left=" + centerLeft + ",top=" + centerTop;
     var oWin = window.showModalDialog(url, name,openParams);
     return oWin;
}

</script>
0
 
LVL 25

Assisted Solution

by:archrajan
archrajan earned 1000 total points
ID: 13652113
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

</HEAD>

<BODY>


 <script language="JavaScript" type="text/JavaScript">
<!--
function MM_openBrWindow(name, url, width, height, scrollbars) { //v2.0
       var w = screen.availWidth;
     var h = screen.availHeight;
     var centerLeft = (w - width) / 2;
     var centerTop = (h - height) / 2;
     if (!scrollbars) scrollbars = "no";
     var openParams = "scrollbars=" + scrollbars + ", menubar=no, toolbar=no, titlebar=no, status=n, resizable=no, width=" + width + ", height=" + height + ", left=" + centerLeft + ", top=" + centerTop;
     window.showModalDialog(url, name, openParams);
 
}
//-->
</script>
<script>
MM_openBrWindow('mywin','http://www.yahoo.com','640','480')
</script>
</BODY>
</HTML>
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 32

Expert Comment

by:Batalf
ID: 13652134
Another thing, not all browsers supports modal dialog boxes, so a mixture of your original function with the new code may be the best:

<script language="JavaScript" type="text/JavaScript">

function MM_openBrWindow(name, url, width, height, scrollbars) { //v2.0
       var w = screen.availWidth;
     var h = screen.availHeight;
     var centerLeft = (w - width) / 2;
     var centerTop = (h - height) / 2;
     if (!scrollbars) scrollbars = "no";
     
     if(document.all){
           var openParams = "scrollbars:" + scrollbars + ",status:no,resizable:no,dialogWidth:" + width + ",dialogHeight:" + height + ",left=" + centerLeft + ",top=" + centerTop;
           var oWin = window.showModalDialog(url, name,openParams);
     }else{
            var openParams = "scrollbars=" + scrollbars + ", menubar=no, toolbar=no, titlebar=no, status=n, resizable=no, width=" + width + ", height=" + height + ", left=" + centerLeft + ", top=" + centerTop;
           var oWin = window.open(url, name, openParams);    
     
     }
     return oWin;
}

</script>
<a href="#" onclick="MM_openBrWindow('TheWindow','page9.html','500','500','yes');return false">Open</a>
0
 

Author Comment

by:bilgehanyildirim
ID: 13652175
<a href="javascript:void(0);" onClick="MM_openBrWindow('NewWindow','editlogindetails.php?customerID=<? echo $customerID; ?>','750','261','no')"><img src="imageFiles/siteImages/btn_changedetails.gif" width="60" height="20" border="0"></a>

when I click on the button it opens the popup with a script error
Error Object Expected

Do you want to continue running this script?

If i say yes, it works fine

0
 
LVL 25

Expert Comment

by:archrajan
ID: 13652202
did u try this script of mine

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_openBrWindow(name, url, width, height, scrollbars) { //v2.0
       var w = screen.availWidth;
     var h = screen.availHeight;
     var centerLeft = (w - width) / 2;
     var centerTop = (h - height) / 2;
     if (!scrollbars) scrollbars = "no";
     var openParams = "scrollbars=" + scrollbars + ", menubar=no, toolbar=no, titlebar=no, status=n, resizable=no, width=" + width + ", height=" + height + ", left=" + centerLeft + ", top=" + centerTop;
     window.showModalDialog(url, name, openParams);
 
}
//-->
</script>
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13652216
There's probably something in the popup window code that causes this problem. What's on the line it's refering to.

And btw. In my code above, there were an error in the params. dialogwidth and dialogheight has to be speicified as pixels.

<script language="JavaScript" type="text/JavaScript">

function MM_openBrWindow(name, url, width, height, scrollbars) { //v2.0
       var w = screen.availWidth;
     var h = screen.availHeight;
     var centerLeft = (w - width) / 2;
     var centerTop = (h - height) / 2;
     if (!scrollbars) scrollbars = "no";
     
     if(document.all){
           var openParams = "scrollbars:" + scrollbars + ";status:no;resizable:no;dialogWidth:" + width + "px;dialogHeight:" + height + "px;left=" + centerLeft + ";top=" + centerTop;
           var oWin = window.showModalDialog(url, name,openParams);
     }else{
            var openParams = "scrollbars=" + scrollbars + ", menubar=no, toolbar=no, titlebar=no, status=n, resizable=no, width=" + width + ", height=" + height + ", left=" + centerLeft + ", top=" + centerTop;
           var oWin = window.open(url, name, openParams);    
     
     }
     return oWin;
}

</script>
<a href="#" onclick="MM_openBrWindow('TheWindow','page9.html','400','500','yes');return false">Open</a>
0
 
LVL 25

Expert Comment

by:archrajan
ID: 13652223
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_openBrWindow(name, url, width, height, scrollbars) { //v2.0
       var w = screen.availWidth;
     var h = screen.availHeight;
     var centerLeft = (w - width) / 2;
     var centerTop = (h - height) / 2;
     if (!scrollbars) scrollbars = "no";
     var openParams = "scrollbars=" + scrollbars + ", menubar=no, toolbar=no, titlebar=no, status=n, resizable=no, width=" + width + ", height=" + height + ", left=" + centerLeft + ", top=" + centerTop;
     window.showModalDialog(url, name, openParams);
 
}
//-->
</script>
</HEAD>

<BODY>
<a href="javascript:void(0);" onClick="MM_openBrWindow('NewWindow','editlogindetails.php?customerID=<? echo $customerID; ?>','750','261','no');return false;"><img src="imageFiles/siteImages/btn_changedetails.gif" width="60" height="20" border="0"></a>
</BODY>
</HTML>
0
 
LVL 25

Expert Comment

by:archrajan
ID: 13652232
without width and height mentioned in pixels it wud work the same way... there is no reason to write px at the end..
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13652249
Here's my code in your context. Note that window features has to be in another format when you're using modal dialog box. With normal window.open you set it in this format:

width=500,height=500,resizable=0

With modal dialogboxes, you have to do it in this format

dialogWidth:500px;height:500px;resizable:no

i.e. some other names and semicolon as separator, not comma.


<html>
<head>
<script language="JavaScript" type="text/JavaScript">

function MM_openBrWindow(name, url, width, height, scrollbars) { //v2.0
       var w = screen.availWidth;
     var h = screen.availHeight;
     var centerLeft = (w - width) / 2;
     var centerTop = (h - height) / 2;
     if (!scrollbars) scrollbars = "no";
     
     if(document.all){
           var openParams = "scrollbars:" + scrollbars + ";status:no;resizable:no;dialogWidth:" + width + "px;dialogHeight:" + height + "px;left=" + centerLeft + ";top=" + centerTop;
           var oWin = window.showModalDialog(url, name,openParams);
     }else{
            var openParams = "scrollbars=" + scrollbars + ", menubar=no, toolbar=no, titlebar=no, status=n, resizable=no, width=" + width + ", height=" + height + ", left=" + centerLeft + ", top=" + centerTop;
           var oWin = window.open(url, name, openParams);    
     
     }
     return oWin;
}

</script>
</head>
<BODY>
<a href="javascript:void(0);" onClick="MM_openBrWindow('NewWindow','editlogindetails.php?customerID=<? echo $customerID; ?>','750','261','no');return false;"><img src="imageFiles/siteImages/btn_changedetails.gif" width="60" height="20" border="0"></a>
</BODY>
</HTML>
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13652283
Yes, the params has to be specified correctly. If not, you will get a window with a default size of 500 x 500 pixels or something like that.

In your code, archrajan, the window isn't at the size 750x261 pixels:-)

Batalf
0
 

Author Comment

by:bilgehanyildirim
ID: 13652287
:: Batalf ::

With your code, when I click it gives an error directly, even without showing popup window.

JavaScript error on line 416 which is <a href="javascript:void(0);" onClick="MM_openBrWindow('NewWindow','editlogindetails.php?customerID=<? echo $customerID; ?>','750','261','no');return false;"><img src="imageFiles/siteImages/btn_changedetails.gif" width="60" height="20" border="0"></a>
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13652303
It shows correctly when I try it.
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13652310
Try this:

<html>
<head>
<script language="JavaScript" type="text/JavaScript">

function MM_openBrWindow(name, url, width, height, scrollbars) { //v2.0
       var w = screen.availWidth;
     var h = screen.availHeight;
     var centerLeft = (w - width) / 2;
     var centerTop = (h - height) / 2;
     if (!scrollbars) scrollbars = "no";
     
     if(document.all){
          var openParams = "scrollbars:" + scrollbars + ";status:no;resizable:no;dialogWidth:" + width + "px;dialogHeight:" + height + "px;left=" + centerLeft + ";top=" + centerTop;
          var oWin = window.showModalDialog(url, name,openParams);
     }else{
          var openParams = "scrollbars=" + scrollbars + ", menubar=no, toolbar=no, titlebar=no, status=n, resizable=no, width=" + width + ", height=" + height + ", left=" + centerLeft + ", top=" + centerTop;
          var oWin = window.open(url, name, openParams);    
     
     }
     return oWin;
}

</script>
</head>
<BODY>
<a href="#" onClick="MM_openBrWindow('NewWindow','editlogindetails.php?customerID=<? echo $customerID; ?>','750','261','no');return false;"><img src="imageFiles/siteImages/btn_changedetails.gif" width="60" height="20" border="0"></a>
</BODY>
</HTML>
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13652319
You also have PHP code here, so make sure that you test it over a PHP connection where the PHP code is parsed.
0
 

Author Comment

by:bilgehanyildirim
ID: 13652338
now it pops up the window but with javascript error. if I click on yes, it shows the page correctly but I can't see the source code. There is a form on the popup, when I submit it, it tries to open on the new window. I think modalDialog is not what I need :(
0
 
LVL 25

Expert Comment

by:archrajan
ID: 13652382
thats the best way to go...
always go for solutions that work in all browsers
the popup code which you have already shud work fine... in all the browsers
0
 
LVL 32

Expert Comment

by:Batalf
ID: 13652404
The code we gave you above is the only way of getting a modal dialog box. But as you know, it's browser limited, and it could behave kind of strange when you're not used to it.

The errors you get could probably be solved if you post the code for the lines where they appear.

Batalf
0

Featured Post

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question