真正的模式对话框-js

10 篇文章 0 订阅
9 篇文章 0 订阅

<!--之前写过伪模式对话框,就是用层来显示,样式美观,但模式对话框还是很方便的,所以再介绍一下-->


<html>
<head>
    <title>
        真正的模式对话框
   </title>
   <script language="javascript" type="text/javascript">
   /*用来显示模式对话框的方法*/
   function show()
   {
   /*var mValue接收对话框回传的值*/
    var mValue=showModalDialog("m.html","向对话框传参","dialogWidth:200px;dialogHeight:200px;status:0;help:0");
   /*以上的参数,第一个是嵌入模式对话框的网页,第二个用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数,第三个是属性宽、高、状态栏、帮助按钮等可以自己尝试一下0为没有*/
    if(mValue=="")
    {//如果回传的是空字符串
     document.getElementById("label").innerText="传回的值为空!";
    }else
    {//否则在label中显示
     document.getElementById("label").innerText=mValue;
    }
   }
   </script>
</head>
<body>
   点击按钮<button onClick="show()">弹出对话框</button>
   <label id="label" style="color:green; font-size:14px">这里显示回传值</label>
</body>
</html>

<!--之后要去编写m.html的网页-->

<html>
<head>
   <title>
    模式对话框,有返回值
   </title>
   <script language="javascript" type="text/javascript">
    function closeM()
    {
    window.returnValue=text.value;//设置返回值
    window.close();//关闭窗口
    }
   </script>
</head>
<!--在关闭网页时调用-->
<body onUnload="closeM()">
   <p>这是一个html网页,嵌套在模式对话框中去显示!</p>
   回传一个值<input id="text" type="text" />
   <button onClick="closeM()">关闭显示</button>
</body>
</html>

<!--

   参数说明:   
   sURL--   
   必选参数,类型:字符串。用来指定对话框要显示的文档的URL。   
   vArguments--   
   可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。   
   sFeatures--   
   可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。   
   1.dialogHeight    :对话框高度,不小于100px,IE4中dialogHeight    和    dialogWidth    默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。   
   2.dialogWidth:    对话框宽度。   
   3.dialogLeft:    离屏幕左的距离。   
   4.dialogTop:    离屏幕上的距离。   
   5.center:    {yes    |    no    |    1    |    0    }:窗口是否居中,默认yes,但仍可以指定高度和宽度。   
   6.help:    {yes    |    no    |    1    |    0    }:是否显示帮助按钮,默认yes。   
   7.resizable:    {yes    |    no    |    1    |    0    }    [IE5+]:是否可被改变大小。默认no。   
   8.status:    {yes    |    no    |    1    |    0    }    [IE5+]:是否显示状态栏。默认为yes[    Modeless]或no[Modal]。   
   9.scroll:{    yes    |    no    |    1    |    0    |    on    |    off    }:指明对话框是否显示滚动条。默认为yes。   
   下面几个属性是用在HTA中的,在一般的网页中一般不使用。   
   10.dialogHide:{    yes    |    no    |    1    |    0    |    on    |    off    }:在打印或者打印预览时对话框是否隐藏。默认为no。   
   11.edge:{    sunken    |    raised    }:指明对话框的边框样式。默认为raised。   
   12.unadorned:{    yes    |    no    |    1    |    0    |    on    |    off    }:默认为no。  

-->

<!--
提示:可以在m.html中多做样式设置,比如将整体的背景色设置成对话框的颜,这样效果就像是与一个对话框一个整体。具体应用要看个人的发挥咯!知识是公有的,但思路是自己的!-->

转载于:http://hi.baidu.com/slzs_zyt/blog/item/32fd234f4fa9e731afc3ab9e.html


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值