Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 798
  • Last Modified:

Modal Window

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
bilgehanyildirim
Asked:
bilgehanyildirim
  • 10
  • 5
  • 3
2 Solutions
 
BatalfCommented:
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
 
BatalfCommented:
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
 
archrajanCommented:
<!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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
BatalfCommented:
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
 
bilgehanyildirimAuthor Commented:
<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
 
archrajanCommented:
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
 
BatalfCommented:
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
 
archrajanCommented:
<!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
 
archrajanCommented:
without width and height mentioned in pixels it wud work the same way... there is no reason to write px at the end..
0
 
BatalfCommented:
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
 
BatalfCommented:
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
 
bilgehanyildirimAuthor Commented:
:: 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
 
BatalfCommented:
It shows correctly when I try it.
0
 
BatalfCommented:
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
 
BatalfCommented:
You also have PHP code here, so make sure that you test it over a PHP connection where the PHP code is parsed.
0
 
bilgehanyildirimAuthor Commented:
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
 
archrajanCommented:
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
 
BatalfCommented:
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 10
  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now