半透明遮盖效果的实现(点确定后禁止编辑,隐藏 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