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

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

效果图

js Ajax点击链接弹出一个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();
	}




js Ajax点击链接弹出一个DIV层窗口,布布扣,bubuko.com

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

上一篇:drag & resize元素的jQuery实现


下一篇:CSS 性能