|
|
這個(gè)效果我通過(guò)參考賽我網(wǎng)上的個(gè)別效果而參考而來(lái),他的比較復(fù)雜,因?yàn)榻Y(jié)合了其他的一些功能,在這里我就是簡(jiǎn)要的總結(jié)下這個(gè)效果的一點(diǎn)原理:
第一步:定義一個(gè)浮于基層之上的DIV浮動(dòng)層,默認(rèn)顯示模式為隱藏,相關(guān)代碼如下:
<div id="buySelName" class="modalDiv" style="position:absolute;left:300px; top:140px;z-index:2;display:none;">
</div>
第二步:定義一個(gè)包含iframe的浮動(dòng)Div對(duì)象,寬高都是100%,背景色為白色,設(shè)置alpha透明度為50%,主要作用能顯示較好的效果;
<div id="disableDiv" style="position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:1; background-color:#000000; border: 0px none #000000; FILTER:alpha(opacity=50);display:none;";><iframe src="about:blank" name="hiddenIframe" width="100%" height="100%"></iframe></div>
第三步:制作輸出內(nèi)容DIV:
<div id="objText" style="display:none;">
<div class="modalheader">
<div class="header">
<div class="mleft">
<div class="boxheader-text"><span class="b">顯示窗體</span></div>
</div>
<div class="btnright"><a href="Javascript:ShowModal('buy');"><img src="close.gif" alt="關(guān)閉" /></a></div>
</div>
</div>
<div class="modalbody">
希望能大家多多交流!
</div>
</div>
第四步:編寫相關(guān)Javascript腳本:
<SCRIPT LANGUAGE="JavaScript">
<!--
function ShowModal(dname)
{
var buyDiv=document.getElementById(dname+'SelName');
var objDiv=document.getElementById('objText');
var disable=document.getElementById('disableDiv');
if(buyDiv.style.display=='none')
{
buyDiv.style.display='block';
disable.style.display='block';
buyDiv.innerHTML=objDiv.innerHTML;
}else{
buyDiv.style.display='none';
disable.style.display='none';
}
}
//-->
</SCRIPT>
效果演示
下載此文件 JavaScript技術(shù)：用Div仿showModalDialog模式菜單的效果的代碼，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
