JAVASCRIPT模拟模式对话窗口

     本篇文章同样是以jquery为基础的，模拟模式对话窗口,还是老习惯看一下运行窗口让您明白这是个什么东东。页面初始运行效果如图1，注意左侧的滚动条是存在的如果用户单击修改连接则弹出一个模拟对话窗口如图2所示，左侧的滚动条是消失的，用户只能单击关闭才能回到原来页面。
      
图1

图2
      实现这样效果首先引入jquery.js类库，然后自己对其编码，以jquery的一个插件形式编码，具体的JavaScript代码如下所示。
$.fn.extend({
   showdiag:function(diagwidth,diagheight,intopacity,srcurl){
    var enabled='<div id="messagebox_enabled" style="background-color: lightgrey;width:100%;height:'+$(document).height()+'px;position:absolute;top:0px;left:0px;z-index:100;"></div>';
    var diawindow='<div class="plunbox" id="diawindow"><div class="inbox"><div class="inbox-tt"><a href="javascript:"><img src="http://images.cnblogs.com/close.jpg" alt="关闭" id="closediag" /></a></div><div style="height:'+(diagheight-66)+'px;padding:10px;"><iframe src="'+srcurl+'" style="height:100%; width:100%;" scrolling="no" frameborder="0"></iframe></div><div class="clear"></div></div></div>';
    $(document.body).append(enabled);
     $("html").addClass("diagshowx");
     $("body").addClass("diagshowx");
      var css={}
      if(window.navigator.userAgent.indexOf('MSIE')>=1)
     {
      css.filter= 'progid:DXImageTransform.Microsoft.Alpha(opacity='+intopacity*100+')';
     }
     else
     {
      css.opacity= intopacity;
     }
     $("#messagebox_enabled").css(css);
     
     var w,h,de;
     de = document.documentElement;
     w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
     h = self.innerHeight || (de&&de.clientHeight)|| document.body.clientHeight;       
     var cssdia={top:eval(h/2-diagheight/2+$(document).scrollTop())+"px",left:eval(w/2-diagwidth/2)+"px",width:diagwidth+"px",height:diagheight+"px"};
     $("body").append(diawindow);
     $("#diawindow").css(cssdia);
     $("#closediag").click(function(){
     $("#diawindow").remove();
     $("#messagebox_enabled").remove();
     $("html").removeClass("diagshowx");
     $("body").removeClass("diagshowx");});
    }
   })

把上述代码存为showdiag.js文件以便我们在页面中调用，还需要编写一个css文件对页面元素的样式控制，以便我们上述js调用，这个css文件起名为style.css。具体代码如下所示：
.diagshowx{
 margin:0px;
 height:100%;
 overflow:hidden;
}
      在我们的前台页面中引入js文件和css文件并编写如下代码进行调用：

<script type="text/javascript">
$(document).ready(function(){    
    $("#showxx").click(function(){$(document).showdiag(630,500,0.6,'http://www.163.com')});

    });
</script>
其中"showxx"为修改所在a标签的id.<a href="javascript:" id="showxx">修改</a>