效果:点击会更大更好风格的时候弹出页面,并且后面的页面上的按钮不能够使用。
 

js实现网页弹出框

代码实现:js。
知识点:1)js调用dom方法在页面上新建图层;
                            var mesW=document.createElement("div");
 
    mesW.id="mesWindow";
   
    mesW.className="mesWindow";
 
mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button' title='关闭窗口' class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>";
主要方法:var newtag=document.creatElement(“new tag”);
       Newtag.innerHTML=”new window code”
   
                   2)js方法禁止链接的使用。
                            Document.getElementsTagName(“Tagname”);例如:
                            document.getElementsByTagName("p");获取当前页面内的所有的p标签对象数组,调用 for(var i=0;i<y.length;i++){
                y[i].disabled = "disabled";实现对链接的禁用。Disabled为点击的属性。
  
具体实现方法:
Js:
<script>
var isIe=(document.all)?true:false;
 
//弹出方法
function showMessageBox(wTitle,content,wWidth,wHeight)
{
    var bWidth=parseInt(document.documentElement.scrollWidth);
    var bHeight=parseInt(document.documentElement.scrollHeight);
    var back=document.createElement("div");
    back.id="back";
    var styleStr="top:0px;left:0px;position:absolute;width:"+bWidth+"px;height:"+bHeight+"px;";
    styleStr+=(isIe)?"filter:alpha(opacity=100);":"opacity:0.40;";
    back.style.cssText=styleStr;
    document.body.appendChild(back);   
    var mesW=document.createElement("div");
    mesW.id="mesWindow";
    mesW.className="mesWindow";
    mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button' title='关闭窗口' class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>"; styleStr="width:"+wWidth+"px;height:"+wHeight+"px;position:absolute;top:50%;left:50%;margin-left:-"+wWidth/2+"px;margin-top:-"+wHeight/2+"px;";
    mesW.style.cssText=styleStr;
    document.body.appendChild(mesW);
}
 
//关闭窗口
function closeWindow()
{
    if(document.getElementById('back')!=null)
    {
        document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
   }
    if(document.getElementById('mesWindow')!=null)
    {  
        document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
    }
   
    var x=document.getElementsByTagName("input");
    for(var i=0;i<x.length;i++){
        x[i].disabled = "";
    }
    var y=document.getElementsByTagName("a");
    for(var i=0;i<y.length;i++){
        y[i].disabled = "";
    }
}
 
//测试弹出
function testMessageBox(ev)
{  
    var c= document.getElementsByTagName("p");
    var value;//p标签的值;
 
    var x=document.getElementsByTagName("input");
    for(var i=0;i<x.length;i++){
        x[i].disabled = "disabled";
     
    }
    var y=document.getElementsByTagName("a");
    for(var i=0;i<y.length;i++){
        y[i].disabled = "disabled";
        value=y[i].firstChild.nodeValue;
    }
   
    messContent="<div style='padding:20px 0 20px 0;text-align:center'><form action='correctculture.action' name='culture' id='culture' method='post'><table><tr><td><textarea name='m_culture'>"+value+"</textarea><input type='hidden' name='boss' value='lisi'/></td></tr><tr><td><input type='submit' value='提交'/></td></tr></table></form></div>";
    
showMessageBox(‘窗口标题!',messContent,400,200);
}
CSS:
<style>
!-- 弹出窗口css   -->
.mesWindow{
    border:#666 1px solid;
    background:#999999;
    }
.mesWindowTop{
        height:30px;
        border-bottom:#eee 1px solid;
        margin-left:4px;
        padding:3px;
        font-weight:bold;
        text-align:left;
        font-size:12px;
    }
.mesWindowContent{
        margin:4px;
        font-size:12px;
    }
.mesWindow .close{
        height:15px;
        width:40px;
        border:none;
        cursor:pointer;
        text-decoration:underline;
        background:#fff
      }
</style>

这个能够实现点击链接实现修改的,如果想要其他的功能的话,可以修改红色字体的具体能实现。