Html:
<! DOCTYPEHtml>
<Html>
<Head>
<Metacharset="UTF-8" >
<title></Title>
<Style>
#div {
BackgroundRed
Width100px
Height100px
DisplayNone
}
</Style>
<ScriptType="Text/javascript"Src="Js/jquery-3.0.0.min.js" ></Script>
<ScriptType="Text/javascript" >
$(function () {
VarOdiv= $("#div") [0];
VarObtn= $("#btn") [0];
Document.onclick= function (EV) {
VarE=Ev|| Event
VarTarget=E.target||E.srcelement;
if (E.target.id!=' Div ')Event Object
{
Odiv.Style.display="None";
}
}
Obtn.OnClick= function (EV) {
VarE=Ev|| Event
Odiv.Style.display="Block";
if (E&&E.Stoppropagation) {Stop bubbling
E.Stoppropagation ();
}else {
Window.event.cancelBubble= true;
}
}
});
</SCRIPT>
</ HEAD>
< body>
< div id= "div" ></DIV>
<input type= "button" value= ' click on '
Result
Method Two:
Html:
<! DOCTYPEHtml>
<Html>
<Head>
<Metacharset="UTF-8" >
<title></Title>
<Metahttp-equiv="Content-type"Content="Text/html; Charset=utf-8 "/>
<StyleType="Text/css" >
.Popup {
Background-color:#33CC99;
DisplayNone
Width200px
Height200px
/*position:absolute; left:400px; top:100px;*/
Border5PX Solid#FF9999;
Border-radius:5px
Margin0Auto
Margin-top:100px
}
.PopupUL Li {
Line-height:1.5Em
}
</Style>
<ScriptType="Text/javascript"Src="Js/jquery-3.0.0.min.js" ></Script>
<ScriptType="Text/javascript" >
</Script>
</Head>
<Body>
<Divclass="Container" >
<P>
<buttonId="Btnpop"Type="button" > Popup div layer </Button>
</P>
<DivId="Popup"class="Popup" >
<Ul>
<li><span>css</span></Li>
<li><span>html</span></Li>
<li><span>js</span></Li>
<li><span>csharp</span></Li>
<li><span>sql</span></Li>
</Ul>
</Div>
</Div>
<ScriptType="Text/javascript" >
$(function () {
VarObtn= $("#btnPop") [0];
Obtn.OnClick=ShowPopup;
functionShowPopup () {
Document.getElementById ("Popup"). Style.display="Block";
}
functionHidepopup () {
Document.getElementById ("Popup"). Style.display="None";
}
Document.getElementById ("Popup"). onclick= function (E) {
E=E|| window.event;
if (window.event) {
E.cancelbubble= true;
}else {
E.Stoppropagation ();
}
};
Document.body.onclick= function (e) {
e Span style= "color: #f92672;" >= e | | window.event;
var target = e.target | | e.srcelement;
if (target.id === Span style= "color: #e6db74;" > "Btnpop") return;
hidepopup ();
};
})
</SCRIPT>
</BODY>
</HTML>
Click anywhere else on the page to close the popup layer
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
