JS Ajax Click Link Popup a div layer window

Here are some of the code captured in the actual project, if you want to download it directly, you can click here to click on the text to pop up a div layer window code.

HTML code

<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 Hall </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 Hall </span> </a>& lt;/div><!--pop-up layer--><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 and Ajax Code

<script> var http_request = false;        function Createrequest (url,objid) {http_request = false; if (window.            XMLHttpRequest) {//non ie browser http_request = new XMLHttpRequest ();            if (http_request.overridemimetype) {http_request.overridemimetype ("text/xml"); }}else if (window.            ActiveXObject) {//ie browser try{http_request = new ActiveXObject ("Msxml2.xmlhttp");                }catch (e) {try{http_request = new ActiveXObject ("Microsoft.XMLHTTP");            }catch (e) {}}} if (!http_request) {alert ("Cannot create XMLHTTP instance");        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 (' the page you requested found an error!                '); }}}}//This function is used when the user clicks on the chat hall to determine if it is logged in function verify (obj) {var strsession = "{$Think. Session        . Users.user_name} ". toString ();            if (strsession = = ") {alert (' Please login first '); 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";        }}//Close the popup layer function Closediv () {document.getElementById (' Bg_div '). style.display= "None";    document.getElementById (' Pwd_div '). style.display= "None"; }</script>

The interface to be introduced by the pop-up layer <div style= "margin:15% 0 0 20%;" >    <form action= ' __app__/article/tochat ' method= ' post ' >            Please enter the chat room password: <br/><br/>            < Input type= ' password ' name= ' pwd ' style= ' height:30px; '/>            <button type= ' Submit ' class= ' btn btn-primary ' > Enter chat room </button>            <input id= ' channels ' type= ' hidden ' name= ' channels ' value= ' {$channels} '/>    </ Form></div>

Knowledge Points:
1.
Opacity set the transparency of the element, all browsers support the Opacity property
A.
-moz-opacity:0.8;//in Gecko engine-based browsing (Firefox, Mozilla),-moz-opacity is used to define the transparency of an element.
Syntax:-moz-opacity:number | Inherit;
Assign value
0 (or less)
Element fully transparent (invisible)
0 < number < 1
Element transparent (background visible)
1 (or more)
element is completely opaque (solid)

Example
Hbox.example {
-moz-opacity:0.5;
}
B.ie under
Filter:alpha (opacity=80);//ie8 and earlier versions support alternative filter properties

2.
The overflow property specifies what happens when the content overflows the element box.

Possible values
Value Description
Visible default value. The content is not trimmed and is rendered outside the element box.
Hidden content is trimmed, and the rest is not visible.
Scroll content is trimmed, but the browser displays scroll bars to see the rest of the content.
Auto If the content is trimmed, the browser displays a scroll bar to view the rest of the content.
Inherit specifies that the value of the overflow property should be inherited from the parent element.

All major browsers support the overflow property.

Note: The property value "Inherit" is not supported by any version of Internet Explorer (including IE8).

3. Because the project uses the thinkphp framework, each page has a common head and bottom, so the template layout function is temporarily closed in the Chatpwd method, so that we can introduce the CHATPWD page to the layout of the popup layer
Layout (false); Temporarily closes the layout feature of the current template

Chat Room Password Login interface

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;" > You are not logged in!!! </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;" > Chat Hall number is full </div> ';            Exit;        }        Layout (false); $this->assign (' channels ', $value); $this->display ();}