下面是在实际项目中截取的部分代码，如果你想下载下来直接使用，可以点击这里点击文字弹出一个DIV层窗口代码。

效果图

HTML代码

<div class="cb pt10 mlf10">
    <a href=http://www.mamicode.com/"__APP__/Article/chatpwd/value/7" onclick="verify(this);return false;" target="_blank" class="button button-rounded button-action ml10">7号厅>
JS和Ajax代码
<script>
    var http_request = false;
    function createRequest(url,objID){
        http_request = false;
        if(window.XMLHttpRequest){ //非IE浏览器
            http_request = new XMLHttpRequest();
            if(http_request.overrideMimeType){
                http_request.overrideMimeType("text/xml");
            }
        }else if(window.ActiveXObject){ //IE浏览器
            try{
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            }catch(e){
                try{
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                }catch(e){}
            }
        }
        if(!http_request){
            alert("无法创建XMLHTTP实例");
            return false;
        }
        http_request.open("GET",url,true);
        http_request.send(null);
      
        var obja = document.getElementById(objID);
        http_request.onreadystatechange = function(){
            if(http_request.readyState == 4){
                if(http_request.status == 200){
                    obja.innerHTML = http_request.responseText;
                }else{
                    alert('您请求的页面发现错误！');
                }
            }
        }
    }
    //该函数用来当用户点击聊天大厅时判断其是否登录
    function verify(obj){
        var strSession = "{$Think.session.users.user_name}".toString();
        if(strSession == ''){
            alert('请先登录');
            window.location.href=http://www.mamicode.com/'<?php echo 'http://'.$_SERVER['SERVER_NAME'].'/index.php/index/login.html'; ?>';>
弹出层所要引入的界面
<div style="margin:15% 0 0 20%;">
    <form action='__APP__/Article/toChat' method='post'>
            请输入聊天室密码：<br /><br />
            <input type='password' name='pwd' style='height:30px;' />
            <button type="submit" class="btn btn-primary">进入聊天室</button>
            <input id='channels' type='hidden' name='channels' value=http://www.mamicode.com/'{$channels}' />>
知识点：
1.
opacity设置元素的透明度，所有浏览器都支持 opacity 属性
a.
-moz-opacity:0.8;//在基于Gecko引擎的浏览中（Firefox、Mozilla）, -moz-opacity 用于定义一个元素的透明度。
语法：-moz-opacity: number | inherit ;
赋值
0 (或更少)
    元素完全透明 (invisible)
0 < number < 1
    元素透明 (背景可见)
1 (或更多)
    元素完全不透明 (solid)

范例
hbox.example {
  -moz-opacity: 0.5;
}
b.IE下
filter:alpha(opacity=80);//IE8 以及更早的版本支持替代的 filter 属性

2.
overflow属性规定当内容溢出元素框时发生的事情。

可能的值
值     描述
visible     默认值。内容不会被修剪，会呈现在元素框之外。
hidden     内容会被修剪，并且其余内容是不可见的。
scroll     内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto     如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit     规定应该从父元素继承 overflow 属性的值。

所有主流浏览器都支持 overflow 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

3.因为项目采用的是ThinkPHP框架，每个页面都带有公共的头部和底部，所以在chatpwd方法中临时关闭了模板布局功能，这样便于我们把chatpwd页面引入到弹出层时的布局
layout(false); // 临时关闭当前模板的布局功能

//聊天室密码登陆界面
	public function chatPWD(){
		$value=http://www.mamicode.com/I('get.value');>