js Ajax点击链接弹出一个DIV层窗口

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

效果图

HTML代码

    7号厅
      8号厅  

JS和Ajax代码

弹出层所要引入的界面

    

            请输入聊天室密码：


            
            进入聊天室
            
    

知识点：
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=I('get.value');
        $m = A('Article','Event');
        $username = $_SESSION['users']['user_name'];
        if(empty($username)){
            echo '
你还没有登录！！！
';
            exit;
        }
        $m->checkOnline($username);
        $m->cpMessage($value);
        $res = $m->checkNum($value);
        if($res){
            echo '
聊天大厅人数已满
';
            exit;
        }
        layout(false);
		$this->assign('channels',$value);
		$this->display();
	}