基于JavaScript的弹出效果的实现

弹出框是网站页面必不可少的一部分。今天借助我们的平台，和大家分享一下js实现的简单弹匣效果。这篇文章写得不好。请原谅我！

首先，我们来分析一下弹出窗口的组成部分。简单的弹出分为头部、内容和尾部。标题包含标题和关闭按钮，内容可以是图形、媒体、iframe、flash等。而尾部是按钮(确认、取消等。).在这个例子中，我不会在尾部添加按钮。这个例子主要是实现弹出的核心部分。

！DOCTYPE html htmlheartheta charset=' UTF-8 ' title/title style body，div { padd : 0；margin : 0；}html，正文{ width : 100%；高度： 100%；} a { text-decoration : none；}.pop { border-radius : 5px；背景-color : # fff；border: #eee 1px固体；绝对位置：宽度： 350 px；左侧：35%；top : 25%；}.pop-title { background-image :线性-渐变(#eee，# EFE fef)；相对位置：cursor:指针；}.流行标题h3，弹出标题a { display : inline-block；}.pop-title H3 { font-size : 14px；margin : 0；padding: 5px}.弹出标题a { position: absolutetop: 5pxright: 5px}.pop-content { padd : 10px；}/style/headbydivvh3 message//h3a href=' JavaScript :'X/a/divdiv弹出框已显示/div/div/body/html弹出框。按下头部，开启移动模式，松开头部，禁止移动。其实这就是这句话的意思。当然，逻辑相对简单。

这里我们可能会想到几个变量，比如移动X，Y坐标，移动开关和禁令。然后我们在标题中添加onmousedown和onmouseup事件。

在onmousedown事件中，手机主要是打开的。

onmouseup事件中的逻辑主要是关闭移动，禁止弹匣的移动。

然后我们需要移动，当我们需要移动的时候，我们需要在一定的范围内移动。我们在身体内部活动。所以我们给身体增加了一个onmousemove事件。我们在这里做的是移动弹出框的位置。

在这三个事件中，CSS中的位置属性和JS中事件事件中属性的坐标主要匹配。

var pop=document . getelementsbyclassname(' pop ')[0]；var pop _ title=pop . getelementsbyclassname(' pop-title ')[0]；var bd=document.bodyvar x=0；var y=0；var ismove=false//是否开启移动var downx=30var霜霉病=30；pop _ title . onmousedown=function(e){ x=e . PageX；y=e.pageYdownx=e.offsetX柔和=e.offsetYismove=true} BD . onmousemove=function(e){ if(is move){ var CX=e . Pagex-downx；var cy=e.pageY -柔和；pop . style . left=CX ' px '；pop . style . top=cy ' px '；x=e.xy=e.y} e . PreventDefault()；} pop _ title . onmouseup=function(e){ x=e . PageX；y=e.pageYismove=falseConsole.log('移动完成')}移动弹出框后，我们在关闭按钮上添加一个关闭事件。

//close varpop _ close=pop . getelementsbyclasname(' pop-close ')[0]；pop _ close . onclick=function(){ pop . parent node . remove child(pop)；}嗯，实现了一个简单的弹出框。同样，代码本身可以优化打包并添加其他功能。兼容性问题可能需要自己解决(IE9之前的版本)。

Js会给大家介绍这么多实现弹出效果的方法，希望对大家有所帮助！