js范例学习——窗口/框架与导航条设计之弹出网页对话框

1、弹出指定大小的网页模式对话框（使用showModalDialog()方法不兼容chrome）

function openDialog(){

　　var someValue = window.showModalDialog("news.html","","dialogWidth=640px;dialogHeight=423px;status=no;help=no;scrollbars=no")

}

说明：showModalDialog(sURL,vArgument,sFeatures)

sURL:指定URL地址；

vArguments:向网页对话框传递参数，传递参数的类型不限制。

sFeatures:可选项，对话框的设置参数。

对话框的设置参数：

2、弹出全屏显示的网页模式对话框

function openDialog(){

　　var width = screen.width;

　　var height = screen.height;

　　window.showModalDialog("news.html","","dialogWidth='+width+'px;dialogHeight='+height+'px;status=no;help=no;scrollbars=no");

}

说明：showModalDialog()方法打开的网页对话框为模式窗口，置于父窗口之上，必须关闭之后才能访问父窗口；showModelessDialog()打开的是无模式窗口，打开后不必关闭也可访问父窗口。（showModelessDialog不兼容firefox和chrome）

3、网页拾色器

颜色窗口：

var h = new Array(6)
h[0] = "FF";
h[1] = "CC";
h[2] = "99";
h[3] = "66";
h[4] = "33";
h[5] = "00";
function action(RGB) {
 //alert('您选择的颜色是:#'+RGB);
 parent.window.returnValue="#"+RGB;
 window.close();
}
function Mcell(R, G, B) {
 document.write('<td bgcolor="#' + R + G + B + '">');
 document.write('<a href="#" onClick="action(\'' + (R + G + B) + '\')">');
 document.write('<img border=0 height=12 width=12 \')" alt=\'#'+R+G+B+'\'>');
 document.write('</a>');
 document.write('</td>');
}
function Mtr(R, B) {
 document.write('<tr>');
 for (var i = 0; i < 6; ++i) {
  Mcell(R, h[i], B);
 }
 document.write('</tr>')
}
function Mtable(B) {
 document.write('<table cellpadding=0 cellspacing=0 border=0>');
 for (var i = 0; i < 6; ++i) {
  Mtr(h[i], B);
 }
document.write('</table>');
}
function Mcube() {
 document.write('<table cellpadding=0 cellspacing=0 border=0><tr>');  //
 for (var i = 0; i < 6; ++i) {
   if(i%3==0){
   document.write('<tr>');
   }
  document.write('<td bgcolor="#FFFFFF">');
  Mtable(h[i])
  document.write('</td>');
 }
   if(i%3==0){
   document.write('</tr>');
   }
 document.write('</tr></table>');
}
Mcube()

主窗口：

function colorpick(field){
   var rtn = window.showModalDialog("color.htm","","dialogWidth:225px;dialogHeight:170px;status:no;help:no;scrolling=no;scrollbars=no");
   if(rtn!=null)
    field.style.background=rtn;
     return;
   }

调用函数：

<input name="color" type="text" id="color" size="3" readonly="yes" style="background:#000;" onclick="colorpick(this);">