In fact, this effect is very common, and many websites now have this effect. The main part of it is implemented using Js. I checked it yesterday and it is very simple to explain the principle, but I didn't know anything at first. so it is very troublesome to do this .. I changed a lot of solutions .,.
1) The first step is to bring up a layer. I think it's very simple. At first, we can hide this layer and show it in the method,
2) Then I want to disable the entire page. Here I am taking a lot of detours. In fact, it is also a layer, but it adds some small things in it,
3) the pop-up layer should be able to be dragged,
First, deploy several layers on the page as follows;
<Div id = "ly" style = "position: absolute; top: 0px; filter: alpha (opacity = 60); background-color: #777;
Z-index: 2; left: 0px; display: none; ">
This layer masks the page layer. filter: alpha (opacity = 60); It should be to disable the filter for that effect,
<Div>
<A onclick = "show ()"> pop-up </a>
</Div>
<Div id = "divtest" style = "position: absolute; Z-index: 3; width: 540; Height: 170px;
Background-color: yellow; display: none; top: 100px; left: 100px; ">
<Div id = "DD" style = "background-color: red; width: 365px; Height: 20px; float: Left ;"
Onmousedown = "down ()">
</Div>
<Div style = "background-color: red; width: 35px; Height: 20px;">
<A onclick = "closes ()"> close </a>
</Div>
</Div>
Function show ()
{
Document. All. ly. style. Display = "Block ";
Document. All. ly. style. width = Document. Body. clientwidth + 20;
Document. All. ly. style. Height = Document. Body. clientheight + 20;
Document. All. divtest. style. Display = 'block ';
Document. getelementbyid ("divtest"). style. Visibility = "visible ";
}
Function closes ()
{
If (window. Confirm ("close this layer "))
{
Document. getelementbyid ("divtest"). style. Visibility = "hidden ";
Document. All. ly. style. Display = 'none'
}
}
When you click "pop-up", the divtest layer is displayed, the ly masked layer is displayed, and it is locked. When you click Close, The divtest is hidden, and the ly is hidden.
This completes the pop-up of the masked layer, followed by dragging the pop-up layer. Here we mainly call the following methods:
VaR PX = 0;
VaR py = 0;
VaR begin = false;
VaR topdiv;
Function down ()
{
Begin = true;
Document. getelementbyid ("divtest"). style. cursor = "hand ";
Event. srcelement. setcapture ();
Px = Document. getelementbyid ("divtest"). style. pixelleft-event. X;
Py = Document. getelementbyid ("divtest"). style. pixeltop-event. Y;
}
Function document. onmousemove ()
{
If (BEGIN)
{
Document. getelementbyid ("divtest"). style. pixelleft = px + event. X;
Document. getelementbyid ("divtest"). style. pixeltop = py + event. Y;
}
}
Function document. onmouseup ()
{
Begin = false;
Document. getelementbyid ("divtest"). style. cursor = "default ";
Event. srcelement. releasecapture ();
}
In the previous divtest, onmousedown = "down ()" is followed by several methods in a way similar to the anonymous method in C #. It is good to use it for the first time.
The following is the entire HTML code:
<HTML>
<Head runat = "server">
<Title> untitled page </title>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<Div id = "divtest" style = "position: absolute; Z-index: 3; width: 540; Height: 170px;
Background-color: yellow; display: none; top: 100px; left: 100px; ">
<Div id = "DD" style = "background-color: red; width: 365px; Height: 20px; float: Left ;"
Onmousedown = "down ()">
</Div>
<Div style = "background-color: red; width: 35px; Height: 20px;">
<A onclick = "closes ()"> close </a>
</Div>
</Div>
<Div id = "ly" style = "position: absolute; top: 0px; filter: alpha (opacity = 60); background-color: #777;
Z-index: 2; left: 0px; display: none; ">
</Div>
<Div id = "Main" style = "background-color: azure; Height: 700px;">
<Div>
<A onclick = "show ()"> pop-up </a>
</Div>
<Div>
<Input type = "button" id = "T" onclick = "javascript: Alert ('analytics');" value = "value"/>
</Div>
<Br/>
</Div>
</Form>
<SCRIPT type = "text/JavaScript">
Function show ()
{
Document. All. ly. style. Display = "Block ";
Document. All. ly. style. width = Document. Body. clientwidth + 20;
Document. All. ly. style. Height = Document. Body. clientheight + 20;
Document. All. divtest. style. Display = 'block ';
Document. getelementbyid ("divtest"). style. Visibility = "visible ";
}
Function closes ()
{
If (window. Confirm ("close this layer "))
{
Document. getelementbyid ("divtest"). style. Visibility = "hidden ";
Document. All. ly. style. Display = 'none'
}
}
VaR PX = 0;
VaR py = 0;
VaR begin = false;
VaR topdiv;
Function down ()
{
Begin = true;
Document. getelementbyid ("divtest"). style. cursor = "hand ";
Event. srcelement. setcapture ();
Px = Document. getelementbyid ("divtest"). style. pixelleft-event. X;
Py = Document. getelementbyid ("divtest"). style. pixeltop-event. Y;
}
Function document. onmousemove ()
{
If (BEGIN)
{
Document. getelementbyid ("divtest"). style. pixelleft = px + event. X;
Document. getelementbyid ("divtest"). style. pixeltop = py + event. Y;
}
}
Function document. onmouseup ()
{
Begin = false;
Document. getelementbyid ("divtest"). style. cursor = "default ";
Event. srcelement. releasecapture ();
}
</SCRIPT>
</Body>
</Html>
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
