下面是在实际项目中截取的部分代码，如果你想下载下来直接使用，可以点击这里点击文字弹出一个DIV层窗口代码。
效果图
HTML代码
<div class="cb pt10 mlf10">
<a href="__APP__/Article/chatpwd/value/7" onclick="verify(this);return false;" target="_blank" class="button button-rounded button-action ml10"><span class="colwh fw">7号厅</span></a>
<a href="__APP__/Article/chatpwd/value/8" onclick="verify(this);return false;" target="_blank" class="button button-rounded button-primary ml40"> <span class="colwh fw">8号厅</span> </a>
</div>
<!-- 弹出层 -->
<div id="bg_div" onclick="closeDiv();" style="display:none;position:absolute;top:0%;left:0%;width:100%;height:100%;background:black;z-index:9998;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);"></div>
<div id="pwd_div" style='display:none;z-index:9999;position:absolute;top:30%;left:30%;width:30%;height:30%;border:1px solid #e2e1e1;background-color:white;overflow:auto;'>
</div>
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='<?php echo 'http://'.$_SERVER['SERVER_NAME'].'/index.php/index/login.html'; ?>';
return false;
}else{
var url = obj.href;
createRequest(url,'pwd_div');
document.getElementById('bg_div').style.display="block";
document.getElementById('pwd_div').style.display="block";
}
}
//关闭弹出层
function closeDiv(){
document.getElementById('bg_div').style.display="none";
document.getElementById('pwd_div').style.display="none";
}
</script>
弹出层所要引入的界面
<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='{$channels}' />
</form>
</div>
知识点：
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 '<div style="margin:25% 0 0 30%;font-size:20px;">你还没有登录！！！</div>';
exit;
}
$m->checkOnline($username);
$m->cpMessage($value);
$res = $m->checkNum($value);
if($res){
echo '<div style="margin:25% 0 0 30%;font-size:20px;">聊天大厅人数已满</div>';
exit;
}
layout(false);
$this->assign('channels',$value);
$this->display();
}