您的位置:一分快三全天精准计划 > 一分快三免费计划网站-web前端 > 使用DIV弹出窗口来动态显示内容的原理

使用DIV弹出窗口来动态显示内容的原理

2020-01-14 23:27

运用DIV弹出窗口来动态展现内容的原理:首先利用CSS和HTML隐蔽弹窗中的内容,然后使用JavaScript来动态展现它们。这种效能不只好够丰裕利用有限的版面空间,何况能够升高客商体验;更重视的是,它并不影响SEO效果(因为它实际存在于页面中,只是伊始为不可以见到状态) 1、在html页面中定义四个div,并在div落到实处咱们必要出示的源委。 复制代码 代码如下:

图片 1网址登入

挂号新客户 | 忘记密码?

意气风发图抵千言。让我们看看那一个DIV弹出窗口的效率截图: 2、小编所用的CSS样式 复制代码 代码如下: #login { width:350px; height:250px; border:1px solid #ccc; position:absolute; display:block; z-index:9999; background:#fff; } #login h2 { height:40px; line-height:40px; text-align:center; font-size:14px; letter-spacing:1px; color:#666; background:url(images/login_header.png) repeat-x; margin:0; padding:0; border-bottom:1px solid #ccc; cursor:move; } #login h2 img { float:right; position:relative; top:14px; right:8px; cursor:pointer; } #login div.info { padding:10px 0 5px 0; text-align:center; color:maroon; } #login div.user, #login div.pass { font-size:14px; color:#666; padding:5px 0; text-align:center; } #login input.text { width:200px; height:25px; border:1px solid #ccc; background:#fff; font-size:14px; } #login .button { text-align:center; padding:15px 0; } #login input.submit { width:107px; height:30px; background:url(images/login_button.png) no-repeat; border:none; cursor:pointer; } #login .other { text-align:right; padding:15px 10px; color:#666; } 那在那之中首要注意的是有关div样式的概念,因为要求居中呈现我们应用相对化定位position:absolute;其次因为是弹出层,div必需在最外面,所以普通把z-index设置的不得了大,这里我们设置为z-index:9999;还会有有个别是有关div本人是暗藏的须要安装为display:none,但此处我们需求一贯看效用因此间接让它表现使用display:block; 3、大家要求让它居中显得,那么首先就务须获得浏览器的万丈和增长幅度,若是有滚动条的等级次序依旧竖向偏移,还索要获得那三个长度,通过计算获取div应该浏览器的岗位。 复制代码 代码如下: $.ready { jQuery.fn.extend({ center:function { return $.css.width.scrollLeft. css.height.scrollTop. css. css; } }State of Qatar; }卡塔尔(قطر‎; 通过点击按键让它表现 复制代码 代码如下: $.click { $.center; 效果图 4、能对弹出框实行拖拽 代码完成 复制代码 代码如下: $.ready { jQuery.fn.extend({ //拖拽作用 drag:function; return $.mousedown{ if(e.target.tagName =="H2"State of Qatar{ var diffX = e.clientX - $tar.offset(卡塔尔(قطر‎.left; var diffY = e.clientY - $tar.offset.mousemove{ var left = e.clientX - diffX; var top = e.clientY - diffY; if { left = 0; } else if .scrollLeft.scrollLeft(卡塔尔国; } else if .width.scrollLeft{ left = $ +$ -$tar.width{ top = 0; } else if .scrollTop.scrollTop(卡塔尔; } else if .height.scrollTop{ top = $ +$ - $tar.height(卡塔尔(قطر‎; } $tar.css.css; } $.mouseup.unbind.unbind; } }卡塔尔; }卡塔尔(قطر‎; 这里大家只针对div内容中的H2成分可供点击拖拽,假设需求全局div可进展改变,拖拽原理:当鼠标在钦定成分上的按下时,获取该鼠标点坐标,通过计算,把图片也移步到相对应的任务,风华正茂旦鼠标点击撤废,相呼应的按下事件也跟着裁撤,页面静止。 调用拖拽方法 复制代码 代码如下: $; 今后咱们得以点击弹出框的题目栏随便对其在浏览器中拖拽了。

本文由一分快三全天精准计划发布于一分快三免费计划网站-web前端,转载请注明出处:使用DIV弹出窗口来动态显示内容的原理

关键词: