Share effects of using jquery to create a center Mask Layer
This article describes how to use jquery to create a center mask layer. For more information, see
The Code is as follows:
<! Doctype html>
<Html lang = zh-cn>
<Head>
<Meta charset = UTF-8>
<Title> mask drill </title>
<Link href = "../css/component2.css" rel = "Stylesheet"/>
<Script src = "../js/jquery-1.11.0.min.js"> </script>
<Script src = "../js/shadow. js"> </script>
</Head>
<Body>
<Div class = "left-container layout-container">
<Ul class = "topic-title">
<Li>
<Span class = "fun" >+++ </span>
</Li>
</Ul>
</Div>
<Div class = "right-container layout-container">
</Div>
<Div style = "display: none">
<Div class = "topic-input-div" id = "content-container-templet">
<Ul class = "topic-input-ul">
<Li class = "input-li"> <input type = "text" style = "width: 100%; line-height: 2em "placeholder =" Enter the title "/> </li>
<Li class = "btn-li"> <button class = "sure"> OK </button> </li>
<Li class = "btn-li"> <button class = "cancel"> cancel </button> </li>
</Ul>
</Div>
</Div>
</Body>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ('. Fun'). on ('click', function (){
Console. log ('fun click ');
ShowAddTopic (function (val ){
Console. log (val );
});
});
});
</Script>
</Html>
Shadow. js
The Code is as follows:
Shadow_list = [];
Function showAddTopic (cb ){
Var input_container = $ ('# content-container-templet'). clone ();
Input_container.removeAttr ('id ');
Var shadow = $ ('<div/>'). addClass ('shadow-wrapper'). append (input_container );
Shadow. appendTo (document. body );
Shadow_list.push (shadow );
$ ('. Sure', shadow). on ('click', function (){
Var val = $ ('. input-li input', shadow). val ();
Cb (val );
HideAddTopic ();
});
$ ('. Cancel', shadow). on ('click', function (){
HideAddTopic ();
});
}
Function hideAddTopic (){
If (shadow_list.length> 0 ){
Var shadow = shadow_list.pop ();
Shadow. remove ();
}
}
Component2.css
The Code is as follows:
Html, body {
Padding: 0px;
Margin: 0px;
Width: 100%;
Height: 100%;
Overflow: hidden;
}
Ul, li {
Padding: 0px;
Margin: 0px;
List-style: none;
}
Input, textarea {
Vertical-align: middle;
Border: none;
}
. Layout-container {
Position: absolute;
Top: 0px;
Height: 100%;
Overflow: auto;
}
. Left-container {
Left: 0px;
Width: 20%;
Border: solid 5px # 52BE7F;
}
. Right-container {
Right: 0px;
Width: 80%;
}
. Shadow-wrapper {
Position: absolute;
Width: 100%;
Height: 100%;
}
. Topic-title li span {
Height: 30px;
Line-height: 30px;
Vertical-align: middle;
}
. Topic-title. fun {
Float: right;
}
. Topic-input-div {
Position: absolute;
Left: 50%;
Top: 50%;
Height: 200px;
Width: 400px;
Margin-top:-120px;
Margin-left:-210px;
Padding: 20px 10px;
}
. Topic-input-ul {
Vertical-align: middle;
Position: absolute;
Width: pixel PX;
Height: 2em;
Left: 50%;
Top: 50%;
Margin-top:-1em;
Margin-left:-pixel PX;
}
. Topic-input-ul li {
Line-height: 2em;
Display: inline-block;
* Display: inline;
}
. Topic-input-ul. input-li {
Width: 40%;
}
. Topic-input-ul. btn-li {
Width: 15%;
}