About me

加载数据中...

Calendar

加载数据中...

Search

Recent Articles

加载数据中...

Recent Comments

加载数据中...

Links

Statistics

加载数据中...

AD

Support




本站部分内容来源于互联网,如有侵犯你的权益的,请告知,我们会及时的核实和删除!!!

 

 
给我留言My Guestbook  我的照片My Photo  友情提示您,当前时间为:

DIV层的应用 - 半透明遮盖效果的实现

[ 2007-8-29 9:48:00 | ]

半透明遮盖效果的实现(点确定后禁止编辑,隐藏 Select From 并弹出对话框

<html>
<title>半透明遮盖</title>
<head>
<script>
function test()
{
var div = document.createElement("<div class='trans' oncontextmenu='return false;'>");
var iframe = document.createElement("<iframe class='trans' style='z-index:98;'>");
document.getElementsByTagName("body")[0].appendChild(iframe);
document.getElementsByTagName("body")[0].appendChild(div);  
progress();
iframe.style.display="none";
div.style.display="none";
}

function progress()
{
   var a = window.showModalDialog('Propage.html', window,'dialogWidth=500px;dialogHeight=250px;status=no');
   for(i=0;i<a.length;i++) document.getElementById("msg").innerHTML=document.getElementById("msg").innerHTML + "<br>" + a[i];

// if(confirm('工作安排添加成功!是否继续添加?'))
//    document.getElementById("msg").innerHTML="Yes";
// else
//    document.getElementById("msg").innerHTML="NO";
}
</script>
<style>
*{margin:0; padding:0;}
body{height:100%;} .trans{width:100%;background:#CCC;position:absolute;left:0;right:0;top:0;bottom:0;-moz-opacity:0.5;filter:alpha(opacity=50);z-index:99;height:100%;}
</style>
</head>
<body>
<br>
点确定后禁止编辑,并出现对话框
<br><br>
<select id=slss>
<option>选择1</option>
<option>选择2</option>
<option>选择3</option>
</select>
<input type=button value=" 确定 " onclick="test()" ID="Button1" NAME="Button1">
<br><br>
<div id=msg style="color:red"></div>
</body>
</html>

附:Propage.html 中的代码如下:

<script>
function sendToSubmit()
{
   var a=new Array("a","b")
   window.returnValue = a
   window.close()
}
function sendToBack()
{
   var a=new Array("cancle")
   window.returnValue = a
   window.close()
}
</script>
<body>
<form>
   <input value="确定" type=button onclick="sendToSubmit()">
   <input value="返回" type=button onclick="sendToBack()">
</form>



各种视窗的实现

这里的窗口主要使用 Prototype Window Class ( 官方网站:http://prototype-window.xilinus.com/ )

Web開發者透過Prototype Window Class便可以輕鬆地在網頁上產生各式各樣的視窗(Window or Windows)。

根據Prototype Window Class首頁的說法,它是以Prototype為基礎開發出來的,同時是「inspired by the powerful script.aclou.us」,目前已經在Safari, Camino, Firefox以及IE6等瀏覽器上測試過。

Features特色

  ● Prototype Window Class所產生的code都是 Valid HTML/XHTML
  ● 可調整大小的視窗
  ● 支援最大化、最小化視窗(Maximize/Minimize)
  ● Modal dialogs(看不懂,大概就是可以產生「確認、取消」之類的對話視窗)
  ● 各種視覺效果
  ● 可更換Skin

使用案例:http://prototype-window.xilinus.com/samples.html

发表评论:
加载数据中...
  • 本博客由悠悠80年代社区提供免费服务
  • blog.uu80.com生于80年代网络社区
  • 本博客内部所有文章如需转载,请联系原作者或转载前作者
Powered by Oblog.