|
|
這個效果我通過參考賽我網上的個別效果而參考而來,他的比較復雜,因為結合了其他的一些功能,在這里我就是簡要的總結下這個效果的一點原理:
第一步:定義一個浮于基層之上的DIV浮動層,默認顯示模式為隱藏,相關代碼如下:
<div id="buySelName" class="modalDiv" style="position:absolute;left:300px; top:140px;z-index:2;display:none;">
</div>
第二步:定義一個包含iframe的浮動Div對象,寬高都是100%,背景色為白色,設置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>
第三步:制作輸出內容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="關閉" /></a></div>
</div>
</div>
<div class="modalbody">
希望能大家多多交流!
</div>
</div>
第四步:編寫相關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技術：用Div仿showModalDialog模式菜單的效果的代碼，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
