Code that uses Div to simulate the effect of the showModalDialog mode menu

Today I have studied how to use javascript and DIV to create the display mode form of the current form and make the subform unoperable!

I can refer to some of my online results for this effect. It is complicated because it integrates some other functions, here I will briefly summarize the principle of this effect:

Step 1: Define a DIV floating layer floating above the base layer. The default display mode is hidden. The related code is as follows:


<Div id = "buySelName" class = "modalDiv" style = "position: absolute; left: 300px; top: 140px; z-index: 2; display: none;">
</Div>


Step 2: Define a floating Div object that contains iframe. The width and height are both 100%, the background color is white, and the alpha transparency is set to 50%. The main function is to display better results;


<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>


Step 3: make the output content DIV:


<Div id = "objText" style = "display: none;">
<Div class = "modalheader">
<Div class = "header">
<Div class = "mleft">
<Div class = "boxheader-text"> <span class = "B"> display form </span> </div>
</Div>
<Div class = "btnright"> <a href = "javascript: ShowModal ('buy '); "> </a> </div>
</Div>
</Div>
<Div class = "modalbody">
Hope you can have more exchanges!
</Div>
</Div>


Step 4: Write related javascript scripts:

<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>
Effect demonstration
Download this file