数码资讯
一个HTML页面弹出一个可以拖动到中间的自定义窗口层。
利用DIV弹出窗口内容的动态显示的原理：首先，使用CSS和HTML隐藏弹出的内容，然后使用Javaｓｃｒｉｐｔ（在本教程的jQuery）动态显示。这种影响不仅可以充分利用有限的版面空间，也提高了用户体验；更重要的是，它不影响SEO的效果（因为它实际上存在的页面，但最初是无形的）。 1，定义在HTML
选购提示
关注价格、性能、续航、售后和真实使用场景，理性比较后再下单。
利用DIV弹出窗口内容的动态显示的原理：首先，使用CSS和HTML隐藏弹出的内容，然后使用Javaｓｃｒｉｐｔ（在本教程的jQuery）动态显示。这种影响不仅可以充分利用有限的版面空间，也提高了用户体验；更重要的是，它不影响SEO的效果（因为它实际上存在的页面，但最初是无形的）。
1，定义在HTML页面的div实现我们需要显示在Div.
复制代码代码如下所示：
网站登录
帐户号码：
uff1a密码
新用户注册|忘记密码
图片值一千个字，让我们看看这个div弹出窗口的效果。
2。我使用的CSS样式
复制代码代码如下所示：
{ #登录
宽度：350px；
身高：250px；
边境：1px solid # CCC；
位置：绝对；
显示块；
Z指数：9999；
背景：# FFF；
}
#登录H2 {
身高：40px；
行高：40px；
文本对齐：中心；
字体大小：14px；
字母间距：1px；
颜色：# 666；
背景：URL（图像/ login_header。PNG）repeat-x；
保证金：0；
填充：0；
底部边框：1px solid # CCC；
光标移动；
}
#登录H2 img {
浮子：右边；
职位：相对；
上图：14px；
右：8px；
光标：指针；
}
#登录{ div.info
填料：10px 0 5px 0；
文本对齐：中心；
颜色：栗色；
}
#登录div.user，#登录{ div.pass
字体大小：14px；
颜色：# 666；
填料：5px 0；
文本对齐：中心；
}
#登录{ input.text
宽度：200px；
身高：25px；
边境：1px solid # CCC；
背景：# FFF；
字体大小：14px；
}
# login.button {
文本对齐：中心；
填料：15px 0；
}
#登录{ input.submit
宽度：107px；
身高：30px；
背景：URL（图像/ login_button。PNG）不重复；
边界：无；
光标：指针；
}
# login.other {
文本对齐：正确；
填料：15px 10px；
颜色：# 666；
}
它主要集中在一个样式的定义，因为需要显示我们使用绝对定位的中心位置：绝对的；其次，因为它是一个弹出，div必须在外围，所以通常z-index设置是非常大的，在这里我们设置为Z指数：9999；有在DIV本身有一点是隐藏的需要设置为显示：只有在这里，我们需要直接看到效果，所以让它显示：使用块；
3，我们需要让它显示在中间。首先，我们必须获得浏览器的高度和宽度。如果我们有滚动条的水平或垂直偏移，我们需要得到这个长度。我们可以通过计算获得div浏览器的位置。
复制代码代码如下所示：
$（文档）Ready（函数（））
{
JQuery.fn.extend（{
中心：功能（宽度，高度）
{
返回（这）。Css（左），（$（窗口），Width（）宽度）/ 2 + $（窗口）ScrollLeft（）））。
CSS（顶），（$（窗口），Height（）的高度）/ 2 + $（窗口），ScrollTop（））））。
css（宽度
CSS（高度
}
}）；
}）；
点击按钮让它显示出来。
复制代码代码如下所示：
$（）。Click（函数（））
{
$（#登录）（显示）。中心（350250）； / /显示登录框
}）；
设计素描
4。可以拖放弹出框
代码实现
复制代码代码如下所示：
$（文档）Ready（函数（））
{
JQuery.fn.extend（{
拖动函数
拖动：函数（）{
var $ = $（this）；
返回（这）。Mousedown（function（e）{）
如果（e.target.tagname = = H2）{
无功diffx = e.clientx至tar.offset（左）；
无功diffy = e.clienty至tar.offset（顶部）；
$（document）。Mousemove（function（e）{
VaR左= e.clientx - diffx；
var = e.clienty - diffy；
如果（左< 0）{
左= 0；
}
如果（左< = $（窗口）（。scrollLeft））{
左= $（窗口）ScrollLeft（）；
}
如果（左> $（窗口），Width（+ $）（窗口）（。scrollLeft）-（$焦油。宽度））{
左= $（窗口），Width（+ $）（窗口）（。scrollLeft）（至焦油。宽度）；
}
如果（顶部< 0）{
顶部= 0；
}
如果（顶部< = $（窗口）（。scrollTop））{
顶= $（窗口）ScrollTop（）；
}
如果（顶> $（窗口），Height（+ $）（窗口）（。scrollTop）-（$焦油。高度））{
顶= $（窗口），Height（+ $）（窗口）（。scrollTop）-（$焦油。高度）；
}
tar.css美元（左
}）；
}
$（document）。Mouseup（function（）{）
$（这）。Unbind（鼠标移动）；
$（这）。Unbind（MouseUp ）
}）；
}）；
}
}）；
}）；
在这里我们只为单击并拖动div内容的氢元素，如果需要修改全局DIV，拖动原理：当按下鼠标在指定的元素时，鼠标的坐标，通过计算得到，图片也移到相应的位置，当鼠标单击取消，相应的活动被取消，静态页面。
呼叫和拖动方法
复制代码代码如下所示：
$（#登录）。Drag（）；
现在我们可以点击弹出框的标题栏来拖放它在浏览器中。
1，定义在HTML页面的div实现我们需要显示在Div.
复制代码代码如下所示：
网站登录
帐户号码：
uff1a密码
新用户注册|忘记密码
图片值一千个字，让我们看看这个div弹出窗口的效果。
2。我使用的CSS样式
复制代码代码如下所示：
{ #登录
宽度：350px；
身高：250px；
边境：1px solid # CCC；
位置：绝对；
显示块；
Z指数：9999；
背景：# FFF；
}
#登录H2 {
身高：40px；
行高：40px；
文本对齐：中心；
字体大小：14px；
字母间距：1px；
颜色：# 666；
背景：URL（图像/ login_header。PNG）repeat-x；
保证金：0；
填充：0；
底部边框：1px solid # CCC；
光标移动；
}
#登录H2 img {
浮子：右边；
职位：相对；
上图：14px；
右：8px；
光标：指针；
}
#登录{ div.info
填料：10px 0 5px 0；
文本对齐：中心；
颜色：栗色；
}
#登录div.user，#登录{ div.pass
字体大小：14px；
颜色：# 666；
填料：5px 0；
文本对齐：中心；
}
#登录{ input.text
宽度：200px；
身高：25px；
边境：1px solid # CCC；
背景：# FFF；
字体大小：14px；
}
# login.button {
文本对齐：中心；
填料：15px 0；
}
#登录{ input.submit
宽度：107px；
身高：30px；
背景：URL（图像/ login_button。PNG）不重复；
边界：无；
光标：指针；
}
# login.other {
文本对齐：正确；
填料：15px 10px；
颜色：# 666；
}
它主要集中在一个样式的定义，因为需要显示我们使用绝对定位的中心位置：绝对的；其次，因为它是一个弹出，div必须在外围，所以通常z-index设置是非常大的，在这里我们设置为Z指数：9999；有在DIV本身有一点是隐藏的需要设置为显示：只有在这里，我们需要直接看到效果，所以让它显示：使用块；
3，我们需要让它显示在中间。首先，我们必须获得浏览器的高度和宽度。如果我们有滚动条的水平或垂直偏移，我们需要得到这个长度。我们可以通过计算获得div浏览器的位置。
复制代码代码如下所示：
$（文档）Ready（函数（））
{
JQuery.fn.extend（{
中心：功能（宽度，高度）
{
返回（这）。Css（左），（$（窗口），Width（）宽度）/ 2 + $（窗口）ScrollLeft（）））。
CSS（顶），（$（窗口），Height（）的高度）/ 2 + $（窗口），ScrollTop（））））。
css（宽度
CSS（高度
}
}）；
}）；
点击按钮让它显示出来。
复制代码代码如下所示：
$（）。Click（函数（））
{
$（#登录）（显示）。中心（350250）； / /显示登录框
}）；
设计素描
4。可以拖放弹出框
代码实现
复制代码代码如下所示：
$（文档）Ready（函数（））
{
JQuery.fn.extend（{
拖动函数
拖动：函数（）{
var $ = $（this）；
返回（这）。Mousedown（function（e）{）
如果（e.target.tagname = = H2）{
无功diffx = e.clientx至tar.offset（左）；
无功diffy = e.clienty至tar.offset（顶部）；
$（document）。Mousemove（function（e）{
VaR左= e.clientx - diffx；
var = e.clienty - diffy；
如果（左< 0）{
左= 0；
}
如果（左< = $（窗口）（。scrollLeft））{
左= $（窗口）ScrollLeft（）；
}
如果（左> $（窗口），Width（+ $）（窗口）（。scrollLeft）-（$焦油。宽度））{
左= $（窗口），Width（+ $）（窗口）（。scrollLeft）（至焦油。宽度）；
}
如果（顶部< 0）{
顶部= 0；
}
如果（顶部< = $（窗口）（。scrollTop））{
顶= $（窗口）ScrollTop（）；
}
如果（顶> $（窗口），Height（+ $）（窗口）（。scrollTop）-（$焦油。高度））{
顶= $（窗口），Height（+ $）（窗口）（。scrollTop）-（$焦油。高度）；
}
tar.css美元（左
}）；
}
$（document）。Mouseup（function（）{）
$（这）。Unbind（鼠标移动）；
$（这）。Unbind（MouseUp ）
}）；
}）；
}
}）；
}）；
在这里我们只为单击并拖动div内容的氢元素，如果需要修改全局DIV，拖动原理：当按下鼠标在指定的元素时，鼠标的坐标，通过计算得到，图片也移到相应的位置，当鼠标单击取消，相应的活动被取消，静态页面。
呼叫和拖动方法
复制代码代码如下所示：
$（#登录）。Drag（）；
现在我们可以点击弹出框的标题栏来拖放它在浏览器中。
声明：本文内容用于数码产品信息整理与选购参考，具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。