惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

有赞技术团队
有赞技术团队
Stack Overflow Blog
Stack Overflow Blog
爱范儿
爱范儿
B
Blog
博
博客园 - 三生石上(FineUI控件)
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
A
About on SuperTechFans
C
Check Point Blog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
P
Proofpoint News Feed
Engineering at Meta
Engineering at Meta
Y
Y Combinator Blog
WordPress大学
WordPress大学
小众软件
小众软件
博
博客园 - 司徒正美
Apple Machine Learning Research
Apple Machine Learning Research
Recent Announcements
Recent Announcements
L
LangChain Blog
大猫的无限游戏
大猫的无限游戏
阮一峰的网络日志
阮一峰的网络日志
D
DataBreaches.Net
博
博客园 - 聂微东
Microsoft Security Blog
Microsoft Security Blog
美
美团技术团队

博客园 - shcity

Troubleshooting on TransactionScope Parse string to JSON object Parse date in js blockUI doesn't close when download file in asp.net define namespace in JS Dense_Rank(), Row_Number(), Rank() in sql server reading and writing variable through lock in SSIS script task Fix the issue that cannot open SSIS in BIDS three ways creating custom helpers to show RadioButtonList in MVC using JavaScriptSerializer to serialize object to json using ISerializable to control serialization and deserialization ViewStateAutoManager ReportingService formatting Build my own DataTable split a string into an array through comma div with separated html template - shcity 正则表达式替换日期 foreach 的自动转化类型 在Ajax1.0中调用页面CS文件中的方法
半透明的div对话框
shcity · 2007-12-18 · via 博客园 - shcity

源码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>

    <script type="text/javascript">

function MessageBox(){} 
MessageBox.alert = MessageBox$alert;
MessageBox.confirm = MessageBox$confirm;
MessageBox.create = MessageBox$create;
MessageBox.setSize = MessageBox$setSize;
MessageBox.close = MessageBox$close;

MessageBox.divConfig= {'id':'div1','bgColor':'green','zIndex':1000};  
MessageBox.tableConfig= 
{
    'id':'table1',
    'bgColor':'white',
    'width':'250px',
    'height':'100px',
    'borderColor':'lightblue',
    'titlebgColor':'aliceblue'
};

function MessageBox$alert( message ,callBack )
{
    MessageBox.create( message );
    var btn = document.createElement('input');
    btn.type = 'button';
    btn.value = '确定';
    if( callBack != null )
    {
        btn.attachEvent('onclick',function(){MessageBox.close();callBack();});
    }
    else    
    {
        btn.attachEvent('onclick',function(){MessageBox.close();});
    }
    
    var table = document.getElementById(MessageBox.tableConfig['id']);   
    table.rows[2].cells[0].innerHTML = '';
    table.rows[2].cells[0].appendChild(btn);
}

function MessageBox$confirm( message,callBack )
{
    MessageBox.create( message );
        
    var btnOK = document.createElement('input');
    btnOK.type = 'button';
    btnOK.value = '确定';
    btnOK.style.marginRight = '10px';
    if( callBack != null )
    {
        btnOK.attachEvent('onclick',function(){MessageBox.close();callBack( true );});
    }
    else    
    {
        btnOK.attachEvent('onclick',function(){MessageBox.close();});
    }  
    
    var btnCANCEL = document.createElement('input');
    btnCANCEL.type = 'button';
    btnCANCEL.value = '取消';
    if( callBack != null )
    {
        btnCANCEL.attachEvent('onclick',function(){MessageBox.close();callBack( false );});
    }
    else    
    {
        btnCANCEL.attachEvent('onclick',function(){MessageBox.close();});
    }
    
    var table = document.getElementById(MessageBox.tableConfig['id']);
    table.rows[2].cells[0].innerHTML = '';
    table.rows[2].cells[0].appendChild(btnOK);
    table.rows[2].cells[0].appendChild(btnCANCEL);
}

function MessageBox$create( message )
{
    var divId = MessageBox.divConfig['id'];
    var tableId = MessageBox.tableConfig['id'];
    var div = document.getElementById( divId );
    var table = document.getElementById(tableId);
    var divConfig = MessageBox.divConfig;
    var tableConfig = MessageBox.tableConfig;
    
    if( div == null )
    {
        div = document.createElement('<div style="filter:alpha(opacity=40);position:absolute;top:0px;left:0px;"></div>');
        div.id = divId;
        div.style.backgroundColor = divConfig['bgColor'];
        div.style.zIndex = divConfig['zIndex'];
        
        document.body.appendChild( div );
        
        var frame = document.createElement('<iframe style="filter:alpha(opacity=0);position:absolute;left:0px; top:0px; border-style:none;width:100%;height:100%;"></iframe>');
        frame.style.zIndex = divConfig['zIndex']-1;
        div.appendChild( frame );
        
        var contentH = parseFloat( tableConfig['height'] ) - 50;
        var strHTML = '<table id="'+tableId+'" style="position: absolute; filter : progid:DXImageTransform.Microsoft.DropShadow(color=#666666,offX=3,offY=3,positives=true);font-size:12px; border: '+ tableConfig['borderColor'] +' 1px solid; " cellpadding="2" cellspacing="0">'
            +'<tr>'
            +    '<td style="height:20px; background-color: '+tableConfig['titlebgColor']+';">提示信息'
            +    '</td>'
            +'</tr>'
            +'<tr>'
            +    '<td style="height:'+contentH+'px;text-align:center;word-break:break-all;">'
            +    '</td>'
            +'</tr>'
            +'<tr>'
            +    '<td style="height:30px;text-align:center;">'           
            +'</tr>'
            +'</table>';
        
        document.body.insertAdjacentHTML('afterBegin',strHTML);
        
        table = document.getElementById( tableId ); 
        table.style.backgroundColor = tableConfig['bgColor'];
        table.style.width = tableConfig['width'];
        table.style.height = tableConfig['height'];
        table.style.zIndex = divConfig['zIndex'] + 1;       
 
    }
    
    div.style.display = '';  
    table.style.display = '';
    
    table.rows[1].cells[0].innerHTML = message;    
    
    MessageBox.setSize(div,table); 
    
    window.attachEvent("onresize", function(){ MessageBox.setSize(div,table) } );  
    window.attachEvent("onscroll", function(){ MessageBox.setSize(div,table) } ); 
    
}

function MessageBox$setSize(div,table)
{    
    var sw = parseFloat(document.documentElement.scrollWidth);
    var cw = parseFloat(document.documentElement.clientWidth);
    var sh = parseFloat(document.documentElement.scrollHeight);
    var ch = parseFloat(document.documentElement.clientHeight);    
    
    div.style.width = sw >= cw?sw:cw;    
    div.style.height= sh >= ch?sh:ch;    
    
    table.style.left = parseFloat(document.documentElement.scrollLeft) +  cw/2 -  parseFloat(table.clientWidth)/2;
    table.style.top = parseFloat(document.documentElement.scrollTop) +  ch/2 -  parseFloat(table.clientHeight)/2;
}

function MessageBox$close()
{
    document.getElementById(MessageBox.tableConfig['id']).style.display = 'none';
    document.getElementById(MessageBox.divConfig['id']).style.display = 'none';  
}


//==============================================================================================================
function t()
{
   MessageBox.confirm('are you exit?',h);
}

function h( r )
{
   alert('你选的结果是:' + r );
}
    </script>

</head>
<body >

    <form id="id" action="">
        <button id="btn" onclick="MessageBox.alert('hello world!',function(){alert('你点我了')});">
            Click Me</button>
        <input id="Button1" type="button" value="Click Me" onclick="t()" />
        <select id="Select1">
            <option selected="selected"></option>
        </select>
        asdfasd       

    </form>
</body>
</html>

此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。